https://www.youbaobao.xyz/datav-docs/guide/

canvas

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

  1. <html>
  2.   <head>
  3.   </head>
  4.   <body>
  5.     <canvas id="canvas" width="800" height="800"></canvas>
  6.     <script>
  7.       const canvas = document.getElementById('canvas'); // 获取 DOM 对象
  8.       const ctx = canvas.getContext('2d'); // 获取 Canvas 对象
  9.       ctx.fillStyle = 'red'; // 填充为红色
  10.       ctx.fillRect(0, 0, 50, 50); // 绘制矩形
  12.       ctx.beginPath(); // 开始绘制路径
  13.       ctx.lineWidth = 1; // 线条宽度
  14.       ctx.strokeStyle = 'blue'; // 线条填充色
  15.       ctx.moveTo(100, 100); // 起点坐标
  16.       ctx.lineTo(250, 75); // 中间点坐标
  17.       ctx.lineTo(300, 100); // 终点坐标
  18.       ctx.stroke(); // 绘制线段
  20.       ctx.beginPath();
  21.       ctx.lineWidth = 2;
  22.       ctx.strokeStyle = 'green'; // 圆形边框色
  23.       ctx.fillStyle = 'red'; // 圆形填充色
  24.       ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形
  25.       ctx.stroke(); // 绘制圆形的边框
  26.       ctx.fill(); // 绘制圆形的填充色
  28.       ctx.beginPath();
  29.       ctx.lineWidth = 1;
  30.       ctx.strokeStyle = 'red';
  31.       ctx.moveTo(300, 300);
  32.       ctx.lineTo(301, 301); // 绘制一个点
  33.       ctx.stroke();
  34.     </script>
  35.   </body>
  36. </html>

image.png
步骤：

  1. 编写 canvas 标签（注意指定宽高）
  2. 获取 canvas DOM 对象
  3. 获取 Canvas 对象
  4. 设置绘图属性
  5. 调用绘图 API

参考手册：https://www.w3school.com.cn/tags/html_ref_canvas.asp

svg

SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.   </head>
  5.   <body>
  6.     <svg width="800" height="800">
  7.       <rect
  8.         width="50"
  9.         height="50"
  10.         style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
  11.       />
  12.       <line 
  13.         x1="100" 
  14.         y1="100" 
  15.         x2="250" 
  16.         y2="75"
  17.         style="stroke:blue;stroke-width:1"
  18.       />
  19.       <line 
  20.         x1="250" 
  21.         y1="75" 
  22.         x2="300" 
  23.         y2="100"
  24.         style="stroke:blue;stroke-width:1"
  25.       />
  26.       <circle 
  27.         cx="200" 
  28.         cy="200" 
  29.         r="50" 
  30.         stroke="green"
  31.         stroke-width="2" 
  32.         fill="red"
  33.       />
  34.       <line 
  35.         x1="300" 
  36.         y1="300" 
  37.         x2="301" 
  38.         y2="301"
  39.         style="stroke:red;stroke-width:1"
  40.       />
  41.     </svg>
  42.   </body>
  43. </html>

image.png
步骤：

  1. 编写 svg 标签，指定宽高
  2. 编写 svg 绘图标签
  3. 编写绘图属性和样式

参考手册：https://www.w3school.com.cn/svg/svg_reference.asp