文章

http://www.youbaobao.xyz/datav-docs/

https://blog.csdn.net/u012468376/article/details/73350998

canvas

渲染上下文
getContext() 方法是用来渲染上下文和它的绘画功能。

  1. var canvas = document.getElementById('tutorial');
  2. var ctx = canvas.getContext('2d');

基本案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <canvas id="canvas" width="800" height="800"></canvas>
  10.     <script>
  11.       const canvas = document.getElementById("canvas");
  12.       const ctx = canvas.getContext("2d"); //获取canvas对象
  13.       ctx.fillStyle = "red"; //填充为红色
  14.       ctx.fillRect(0, 0, 50, 50); //绘制矩形
  16.       //lineTo
  17.       ctx.beginPath(); //开始绘制路径
  18.       ctx.lineWidth = 1; //线条宽度
  19.       ctx.strokeStyle = "blue"; //线条填充色
  20.       ctx.moveTo(100, 100); //起点坐标
  21.       ctx.lineTo(250, 75); //中间点坐标
  22.       ctx.lineTo(300, 100); //终点坐标
  23.       ctx.stroke(); //绘制线段
  25.       //arc
  26.       ctx.beginPath();
  27.       ctx.lineWidth = 2;
  28.       ctx.strokeStyle = "green"; // 圆形边框色
  29.       ctx.fillStyle = "red"; // 圆形填充色
  30.       ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形
  31.       ctx.stroke(); // 绘制圆形的边框
  32.       ctx.fill(); // 绘制圆形的填充色
  35.       //绘制点
  36.       ctx.beginPath();
  37.       ctx.lineWidth = 1;
  38.       ctx.strokeStyle = 'red';
  39.       ctx.moveTo(300, 300);
  40.       ctx.lineTo(301, 301); // 绘制一个点
  41.       ctx.stroke();
  42.     </script>
  43.   </body>
  44. </html>

应用：图片压缩

svg

可缩放的矢量图形。

与 canvas 的区别在何处？

canvas 放大会模糊，svg 则不会。

基本案例：

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