画布创建

  1. <canvas id="myCanvas" width="200" height="100"></canvas>

绘制形状

如下图所示 canvas元素默认被网格所覆盖 通常来说 网格中的一个单元相当于canvas中的一像素 栅格起点为左上角 坐标为（0，0）所有元素的位置都相对于原点的定位

坐标和空间

image.png

绘制矩形

canvas只支持一种原生的图形绘制 就是矩形 其他图形都至少需要生成path ，不过我们拥有众多的路径（path）生成方法 让复杂的图形绘制成为了可能
canvas提供了三种方法绘制矩形

1. fillRect(x,y,w,h); 绘制一个填充的矩形

2. strokeRect(x,y,w,h); 绘制一个矩形的边框

3. clearRect(x,y,w,h); 清除指定矩形区域

参数说明 x，y 为矩形左上角的坐标 w，h为矩形的宽高

  1. ctx.fillRect(10,10,100,50)
  2. ctx.strokeRect(10, 70, 100, 50);
  3. ctx.clearRect(15,15,50,25)

上方代码绘制效果
image.png

绘制路径

图形的基本元素是路径 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合 一个路径乃至一个子路径都是闭合的

创建路径绘额外的步骤

1.创建路径的起始点

2.调用绘制方法去绘制路径

3.封闭路径

4.通过填充或描边填充路径渲染 图形

需要用到的方法

1. beginPath()

新建一条路径，路径一旦创建成果 图形绘制命令会被指向到路径上生成路径

2. moveTo(x,y)

将画笔移动到指定坐标(x,y)相当于设置路径的起始点坐标

3. closePath()

闭合路径之后 路径闭合好后 图形绘制命令又重新指向到上下文中

4. stroke()

通过线条来绘制图形轮廓

5. fill()

通过填充绘制路径的内容区域 形成实心图形

绘制线段

  1.  ctx.beginPath(); //新建路径
  2.  ctx.moveTo(50,50); //将画笔移动到指定坐标
  3.  ctx.lineTo(200,50);//绘制一条从（50,50）到（200，50）的 线
  4.  ctx.closePath();//闭合路径
  5.  ctx.stroke(); //绘制路径
  6.  ctx.draw()

绘制效果
image.png

绘制三角形

  1. this.ctx.beginPath();
  2. this.ctx.moveTo(50,50);
  3. this.ctx.lineTo(200,50);
  4. this.ctx.lineTo(200,200);
  5. this.ctx.closePath();
  6. this.ctx.stroke();
  7. this.ctx.draw();

image.png

填充三角形

把上面代码中的 this.ctx.stroke(); 改成 this.ctx.fill(); 即可
image.png

绘制圆弧

有两个方法可以绘制圆弧

1. arc(x, y, r, star, end, anti);

以x,y为圆心 以r为半径 从 start弧度 开始 到end弧度结束 anti 传入布尔值 true表示逆时针 false表示顺时针
image.png

  1. this.ctx.beginPath();
  2. this.ctx.arc(50, 50, 40, 0, Math.PI * 0.5 , false);
  3. this.ctx.stroke();
  4. this.ctx.draw()

绘制效果
image.png

2. arcTo(x1, y1, x2, y2, r)

根据给定的控制点和半径话一段圆弧 最后再以直线连接两个控制点

  1. this.ctx.beginPath();
  2. this.ctx.moveTo(50,50);
  3. this.ctx.arcTo(200, 50, 200, 200, 100);
  4. this.ctx.lineTo(200,200)
  5. this.ctx.stroke();
  6. this.ctx.draw();

image.pngimage.png
这个方法可以理解成 绘制的弧形是由两条切线所决定
第一条切线 起始点1 到控制点1 决定的直线
第二条切线 有控制点1 和控制点2 决定的直线
绘制的圆弧就是与这两条直线相切的圆弧

绘制贝塞尔曲线

贝塞尔曲线介绍

贝塞尔曲线又称为贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线，一般的矢量图形软件通过它来精确绘制出曲线 贝兹曲线由线段与节点组成 节点是可拖动的支点 线段是可伸缩的 我们在ps中使用的钢笔工具就是来做这种矢量曲线的 贝塞尔曲线是计算机图形中相当重要的参数曲线
常用贝塞尔曲线有以下几类

一次贝塞尔曲线

240px-b_1_big.gif

二次贝塞尔曲线

b_2_big.gif

1544764428-5713-240px-BC3A9zier-2-big.svg-.png

三次贝塞尔曲线

b_3_big.gif

image.png

绘制二次贝塞尔曲线

quadraticCurveTo(cpx,cpy,x,y)

参数说明 (cpx,cpy)控制点坐标 (x, y)结束点坐标;

  1.  let controlPoint = [40,100];//控制点
  2.  let startPoint = [10,200];//起始点
  3.  let endPoint = [200,200]; //结束点
  5. this.ctx.beginPath();
  6. this.ctx.moveTo(startPoint[0],startPoint[1]);
  7. this.ctx.quadraticCurveTo(controlPoint[0],controlPoint[1],endPoint[0],endPoint[1]);
  8. this.ctx.stroke();
  10. this.ctx.beginPath();
  11. this.ctx.rect(startPoint[0], startPoint[1], 10, 10);
  12. this.ctx.rect(controlPoint[0], controlPoint[1], 10, 10);
  13. this.ctx.rect(endPoint[0], endPoint[1], 10, 10);
  14. this.ctx.fill();
  15. this.ctx.draw();

绘制效果如下
Canvas 学习笔记 - 图15
image.png

绘制三次贝塞尔曲线

bezierCurveTo(cpx,cpy,cpx2,cpy2,x,y)

image.png
参数说明 (cpx,cpy)控制点1坐标 (cpx2,cpy2)控制点2坐标(x, y)结束点坐标;
image.png

添加样式和颜色

在前面的绘制中只用到了默认的线条和颜色 如果想要给图形是上色 有两个重要的属性可以做到

fillStyle = color;

设置填充颜色

  1.  for(let i=0 ;i<6;i++){
  2.    for (let j = 0; j < 6; j++) {
  3.      let r = Math.floor(255 - 42.5 * i);
  4.      let g = Math.floor(255 - 42.5 * j);
  5.      this.ctx.fillStyle = `rgb(${r},${g},0)`;
  6.      console.log(`调试:输出方块 fillRect(${j*50},${i*50},50,50) 颜色为 rgb(${r},${g},0)`)
  7.      this.ctx.fillRect(j*50 ,i*50 ,50,50);
  8.    }
  9.  }
  10. this.ctx.draw();

绘制结果
image.png

strokeStyle = color;

设置边框颜色

  1. for (let i = 1; i < 6; i++) {
  2.   for (let j = 1; j < 6; j++) {
  3.     let r = this.randomInt(0,255);//返回指定范围随机数randomInt = (from,to) => { parseInt(Math.random() * (to - from + 1) + from);}
  4.     let g = this.randomInt(0,255);
  5.     let b = this.randomInt(0,255);
  6.     this.ctx.strokeStyle = `rgb(${r},${g},${b})`;
  7.     this.ctx.strokeRect(j * 50, i * 50, 40, 40);
  8.   }
  9. }
  10. this.ctx.draw();

image.png

line style 线条样式

lineWidth 线宽

起点和终点的 连线 为中心 上下各占一线宽的一般

lineCap = 'butt' | 'round'| 'square'

image.png

lineJoin = 'round' | 'beval' | 'miter'

同一个path内 线条与线条间接合的样式
image.png

虚线

setLineDash([20,5]) //[实线长度,间隙长度] 

  1. this.ctx.setLineDash([10,5])//实线长度为20 间隙为5
  2. this.ctx.lineDashOffset = -0
  3. this.ctx.strokeRect(50,50,200,200);
  4. this.ctx.draw();

image.png

绘制文本

fillText(text, x, y [, maxWidth])

填充绘制指定文本最大宽度可选

strokeText(text, x, y [, maxWidth])

描边绘制指定文本 最大宽度可选

绘制图片

状态保存和回复

变形

平移

旋转

缩放

变形矩阵

合成

裁剪路径

动画

动画基本步骤

清空canvas

保存cancas状态

绘制动画图形

恢复canvas状态

控制动画