canvas 画布的坐标系和栅格？

  • canvas 的坐标系是二维直角坐标系，由x轴和y轴组成。
  • canvas 坐标系中横向的轴为x轴，越往右越大；竖向的轴为y 轴，越往下越大。
  • canvas 坐标系是以像素的宽高为基底的 栅格就是右图的4 个格子，每一个格子就是一个像素，像素具有rgba 数据。 像素的数量等于canvas 画布的宽度乘以高度。

image.png

矩形的绘制方法

填充矩形方法：fillRect(x,y,w,h)
  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.         // 将画布的宽高设为浏览器的宽高
  5.     canvas.width=window.innerWidth;
  6.     canvas.height=window.innerHeight;
  8.     //画笔
  9.     const  ctx=canvas.getContext('2d');
  11.     /*填充色*/
  12.     ctx.fillStyle='red';
  14.     /*填充矩形方法：fillRect(x,y,w,h)*/
  15.     ctx.fillRect(50,50,400,200);
  16. </script>

image.png

描边矩形方法：strokeRect(x,y,w,h)
  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.         // 将画布的宽高设为浏览器的宽高
  5.     canvas.width=window.innerWidth;
  6.     canvas.height=window.innerHeight;
  8.     // 画笔
  9.     const  ctx=canvas.getContext('2d');
  11.         // 描边色, 默认黑色
  12.     // ctx.strokeStyle='maroon';
  14.     // 描边矩形方法：strokeRect(x,y,w,h)
  15.     ctx.strokeRect(50,50,400,200);
  16. </script>

image.png

清理矩形方法：clearRect(x,y,w,h)
  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     /*描边宽度*/
  11.     ctx.lineWidth=20;
  13.     /*填充色*/
  14.     ctx.fillStyle='red';
  15.     /*描边色*/
  16.     // ctx.strokeStyle='maroon';
  18.     // /*填充矩形方法：fillRect(x,y,w,h)*/
  19.     ctx.fillRect(50,50,400,200);
  21.     // /*描边矩形方法：strokeRect(x,y,w,h)*/
  22.     ctx.strokeRect(50,50,400,200);
  24.     // /*清理矩形方法：clearRect(x,y,w,h)*/
  25.     ctx.clearRect(50,50,400,200);
  27. </script>

image.png

绘制路径的步骤
  • 开始建立路径：beginPath()
  • 向路径集合中添加子路径：
    • [ moveTo(x,y); 形状; closePath() 可选,
    • moveTo(x,y); 形状; closePath() 可选,
    • moveTo(x,y); 形状; closePath() 可选, ]
  • 显示路径：填充fill() ，描边stroke()

子路径的形状
  • 直线：lineTo(x,y); 
  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     ctx.lineWidth=10;
  12.     /*直线：lineTo(x,y); */
  13.     ctx.beginPath();
  14.     ctx.moveTo(50,100);
  15.     ctx.lineTo(400,100);
  16.     ctx.lineTo(400,300);
  17.     ctx.closePath();
  18.     ctx.stroke();
  19. </script>

image.png

  • 圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)

圆弧 arc(x,y,半径，开始弧度，结束弧度，方向)
image.png

  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     ctx.lineWidth=10;
  12.     /*
  13.     * 360° = Math.PI*2
  14.     * 1°=Math.PI*2/360
  15.     * */
  17.     /*arc(x,y,半径，开始弧度，结束弧度，方向)*/
  18.     ctx.beginPath();
  19.     ctx.arc(
  20.         300,300,
  21.         50,
  22.         0,Math.PI*3/2
  23.     )
  25.         // 第二个圆的起点
  26.     ctx.moveTo(370,500);
  27.     ctx.arc(
  28.         300,500,
  29.         70,
  30.         0,Math.PI*2
  31.     )
  32.     ctx.stroke();
  33. </script>

image.png

  • 切线圆弧：arcTo(x1,y1,x2,y2,半径)

image.png

  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     ctx.lineWidth=10;
  12.     /*切线圆弧：arcTo(x1,y1,x2,y2,半径)*/
  13.     ctx.beginPath();
  14.     ctx.moveTo(50,100);
  15.     ctx.lineTo(400,100);
  16.     ctx.lineTo(400,300);
  17.     ctx.stroke();
  19.     ctx.beginPath();
  20.     ctx.strokeStyle = 'red'
  21.     ctx.moveTo(50,100);
  22.     ctx.arcTo(400,100,400,300,100);
  23.     ctx.stroke();
  24. </script>

image.png

  • 二次贝塞尔曲线：quadraticCurverTo(cpx1,cpy1,x,y)

image.png

  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     ctx.lineWidth=10;
  12.     /*二次贝塞尔曲线：quadraCurverTo(cpx1,cpy1,x,y)*/
  13.     ctx.beginPath();
  14.     ctx.moveTo(50,100);
  15.     ctx.quadraticCurveTo(200,60,400,300);
  16.     ctx.stroke();
  17. </script>

image.png

  • 三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)

image.png

  1. <canvas id="canvas"></canvas>
  2. <script>
  3.     const canvas=document.getElementById('canvas');
  4.     canvas.width=window.innerWidth;
  5.     canvas.height=window.innerHeight;
  7.     //画笔
  8.     const  ctx=canvas.getContext('2d');
  10.     ctx.lineWidth=10;
  11.         ctx.beginPath();
  12.     ctx.moveTo(50,100);
  14.         // 三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
  15.     ctx.bezierCurveTo(
  16.         400,0,
  17.         400,400,
  18.         700,300);
  19.     ctx.stroke();
  20. </script>

image.png

  • 矩形：rect(x,y,w,h) 
  1. <script>
  2.     const canvas=document.getElementById('canvas');
  3.     canvas.width=window.innerWidth;
  4.     canvas.height=window.innerHeight;
  6.     //画笔
  7.     const  ctx=canvas.getContext('2d');
  9.     ctx.lineWidth=10;    
  10.         // 矩形：rect(x,y,w,h)
  11.         ctx.beginPath();
  12.     ctx.rect(50,50,100,100);
  13.     ctx.rect(50,200,100,100);
  14.     ctx.stroke();
  15. </script>

image.png

绘制原理

image.png

路径和子路径的概念

路径：

  • 路径是子路径的集合。
  • 一个上下文对象同时只有一个路径，想要绘制新的路径，就要把当前路径置空。
  • beginPath() 方法当前路径置空，也就是将路径恢复到默认状态，让之后绘制的路径不受以前路径的影响。

子路径：

  • 子路径是一条只有一个起点的、连续不断开的线。
  • moveTo(x,y) 是设置路径起点的方法，也是创建一条新的子路径的方法。
  • 路径里的第一条子路径可以无需设置起点，它的起点默认是子路径中的第一个点。

注：rect(x,y,w,h) 绘制路径时，会具备moveTo() 功能。

image.png