canvas

\

canvas 被译为帆布、画布、油布，可以利用 JS 在页面上绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

\

常被应用于：图形、创建动画、游戏、照片、可视化数据（数据图表化，百度的 echarts）替代 flash 的大部分工作。

\

使用 canvas 制作游戏的网站：phaserChina、 phaser.io

\

并不是所有浏览器都支持 canvas，测试：

\

<canvas width="500" height="500" style="border:1px solid">
    您的浏览器不支持canvas元素，请升级您的浏览器
</canvas>

\

创建画布

\

使用属性节点设置宽高，画布的默认大小是 300*150，如果通过 css 放大画布会连同画布中所有内容一起放大。所以不要通过 CSS 去设置画布的大小。一个 html 中可以有多个画布。

\

<canvas width = "500" height = "500" id = "canvas"></canvas>

\

设置画笔

\

canvas 不像 svg 通过 html 属性画图，而是通过 js ，步骤：

\

1. 添加 canvas 元素
2. 在 js 中获取到  canvas 元素节点

3. 获取到上下文创建 context 对象
4. 使用 js 绘制

\

1. 绘制直线

\

首先需要创建上下文 context 对象：

\

let cvs = document.getElementById("canvas");// 获取元素
let ctx = cvs.getContext("2d");	// 创建上下文 context 对象 便于理解也可以取名叫 pen

\

ctx = cvs.getContext("2d") 没有 3d 的写法，如果想要开启 3D 世界的大门，则可以写 canvas.getContext('webgl')。然而 WebGL 是基于 OpenGL ES 2.0 的一套标准，在此不做讨论。

\

指定画笔移动到某一点，然后告诉画笔需要从 a 点画到 b 点。可以让画笔多次移动、绘制，最后统一输出到屏幕上 stroke()

\

// 第一条线
ctx.moveTo(10, 10);	// 落笔点
ctx.lineTo(50, 10);	// 从落笔点画一条线（路径）到指定位置
// 第二条线
ctx.moveTo(10, 20);
ctx.lineTo(50, 20);
// 描绘
ctx.stroke();	// 通过路径列表描边

\

1.1 线段颜色 strokeStyle

\

ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.moveTo(20, 50);
ctx.lineTo(100, 50);
ctx.strokeStyle = "red";
ctx.stroke();

\

1.2 线段的宽度 lineWidth

\

使用 lineWidth 属性也是可以调整的：

\

ctx.moveTo(10, 10);	
ctx.lineTo(50, 10);
ctx.lineWidth = "10";	// 设置线段宽度
ctx.stroke();

\

1.3 线条交界处的样式

\

线条交界处的样式使用 lineJoin 控制，它的值：

\

1. miter  [ˈmaitə]  直角 默认
2. round 圆角

3. bevel  [ˈbevl]  斜切角

\

ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(50, 150);
ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.stroke();

\

\

1. 4 线条转折样式 lineCap

\

线帽，控制线条转折样式：

\

1. butt 默认值
2. square 方形

3. round

\

\

2. 路径

\

除了矩形以外，其他多边形都需要用一条一条的线段去组合。也就是说路径其实就是指的一条一条的线段。一个 canvas 中存在多个路径，称为 路径列表。

\

绘制路径很简单，只需要先告诉 context 一声“我要开始画路径了”，然后通过各种方法绘制路径。如果需要画一个封闭路径，那就最后告诉  context 一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke() 输出到屏幕上。

\

路径起点 moveTo(), 下一个点 lineTo()，连接 storke()，lineTo() 可以设置多个点，而storke() 只需要调用一次 。

\

// 绘制一个三角
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 100);	// 回到原点 与 ctx.closePath() 作用相同
ctx.stroke();
// 绘制一个矩形
ctx.moveTo(50, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineTo(50, 50);
ctx.lineTo(50, 10);
ctx.stroke();

\

\

2.1 清除路径列表 beginPath() 和 连接原点 closePath()

\

对于上面的多个图形，如果只是 stroke() 倒也没发现什么不对，但是如果我们将 stroke() 变成 fill() 填充：

\

// 绘制一个三角
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();	// 描边
// 绘制一个矩形
ctx.moveTo(50, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineTo(50, 50);
ctx.closePath();
ctx.fill(); // 改为填充

\

\

这时问题就出现了，明明是想填充后面的矩形，但却连第一个三角形也一起填充了。

\

同一个画布中，每一次绘制的路径实际上都被保存在了栈空间，当最后通过 fill() 填充或 stroke() 描绘。 它会把整个内存空间中所有路径都算上。因此在每次开始绘制一个新的路径前，可以把内存空间保存的前面的图形路径清除。

\

如果将上面代码添加上接可以实现各自显示各自的样式了：

\

// 绘制一个三角
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();	// 描边
// 绘制一个矩形
ctx.beginPath();	// 清除路径列表
ctx.moveTo(50, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineTo(50, 50);
ctx.closePath();
ctx.fill(); // 填充

\

\

建议： 在实际开发中为了避免每次都去区分哪个图形是先绘制的，哪个图形是后绘制的，一般会在每次图形之前都做一次清空。

\

3. 填充样式与描边样式属性

\

canvas 可以单独设置线条样式和填充样式。填充色 fillStyle 和 边框色 strokeStyle，只需要在 stroke() 或 fill() 前，提前定义好样式就欧凯了。

\

// 绘制一个三角
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.strokeStyle = "red";	// 描边颜色
ctx.closePath();
ctx.stroke();
// 绘制一个矩形
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineTo(50, 50);
ctx.fillStyle = "green";	// 填充颜色
ctx.closePath();
ctx.fill();

\

*


*

\

4. 矩形

\

已知通过四条线段可以组成矩形，画矩形还可以只调用一个接口就能完成。

\

4.1 边框矩形  strokeRect() 和填充矩形 fillRect()

\

默认是黑色。不使用路径也不生成路径。只需要提供原点 x y 坐标，和宽高。

\

ctx.strokeRect(x, y, width, height);
ctx.fillRect(x, y, width, height);

\

4.2 无填充无边框的矩形

\

ctx.rect(x, y, width, height);

\

4.3. 擦除矩形和清空画布

\

参数提供为从 (x,y) 点开始擦除一个 width * height 大小的矩形。

\

ctx.clearRect(x, y, width, height);
// 清空画布
ctx.clearRect(0, 0, cvs.width, cvs.height);

\

\

5. 圆形

\

arc 弧形。可以使用 arc() 方法绘制圆形

\

// ctx.arc(圆心x, 圆心y, 半径, 起始弧度 3点钟位置为0度, 结束弧度, false顺时针 true 逆时针);
ctx.arc(x, y, r, startAngle, endAngle, boolean);

\

角度与弧度的转换公式：Math.PI / 180 * 角度

\

如果要绘制圆形，那么起始角度为 0，结束角度为 360 即：Math.PI / 180 **360 度 等同于 Math.PI 2

\

\

ctx.arc(200, 200, 50, 0, Math.PI*2);
ctx.stroke();

\

绘制一个半圆：

\

ctx.beginPath();
ctx.moveTo(400,300);
ctx.arc(400, 300, 40, 0,Math.PI / 180 * 90, false);
ctx.closePath();
ctx.stroke();

\

\

6. 状态

\

在认识移动和旋转之前需要先来认识一下“状态”，canvas 中的状态用于存储和读取信息，例如颜色、线宽、线帽、坐标系变形，通过栈来保存，而路径通过路径列表来保存。

存在两个方法：

1. save() 保存状态
2. restore() 恢复之前保存的状态，以防止 save( ) 后对 canvas 执行的操作对后续的绘制有影响

先来看个最简单的 demo：

const context = cvs.getContext('2d');

context.fillRect(0, 0, 50, 50); // 在原点绘制一个 50*50 的矩形，默认为黑色

context.fillStyle = 'red'; // 填充样式改为红色
context.fillRect(50, 50, 50, 50); // 在 （50,50）点绘制一个50*50 的矩形，颜色为红色 

context.fillRect(100, 100, 50, 50); // 在 （100,100）点绘制一个50*50 的矩形，颜色依旧保持为更改后的红色

\

如果想要第三个矩形也是黑色，代码必定可以添加第八行：

const context = cvs.getContext('2d');

context.fillRect(0, 0, 50, 50); // 在原点绘制一个 50*50 的矩形，默认为黑色

context.fillStyle = 'red'; // 填充样式改为红色
context.fillRect(50, 50, 50, 50); // 在 （50,50）点绘制一个50*50 的矩形，颜色为红色 

context.fillStyle = 'black'; // 颜色设置为黑色
context.fillRect(100, 100, 50, 50); // 在 （100,100）点绘制一个50*50 的矩形，颜色依旧保持为更改后的红色

但除了这样声明颜色的方式以外，还可以使用 save() 和 restore()：

const context = cvs.getContext('2d');

// 在原点绘制一个 50*50 的矩形，并且将样式保存起来
context.fillRect(0, 0, 50, 50);
context.save();

// 改变样式
context.fillStyle = 'red';
context.fillRect(50, 50, 50, 50);

// 取出上一次保存的样式（把黑色的样式取出），并使用
context.restore();
context.fillRect(100, 100, 50, 50);

现在有以下代码分析执行结果：

\

ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.save();

ctx.lineWidth = 5;
ctx.strokeStyle = "orange";
ctx.save();

ctx.lineWidth = 8;
ctx.strokeStyle = "green";
ctx.save();

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.stroke();

\

最终会执行为线宽8的绿色线段，原因就是线宽8的绿色线段会覆盖掉上面 线宽5的橘色 线段和 线宽3的红色 线段。如果使用栈来表示：

\

\

样式始终会执行栈顶的样式。使用 restore() 则可以“取出”读取状态

\

pen.lineWidth = 3;
pen.strokeStyle = "red";
pen.save();

pen.lineWidth = 5;
pen.strokeStyle = "orange";
pen.save();

pen.lineWidth = 8;
pen.strokeStyle = "green";
pen.save();

pen.moveTo(10, 10);
pen.lineTo(100, 10);
pen.restore();  // 绿
pen.restore();  // 橘
pen.restore();  // 红
pen.stroke();

\

为了简便编码减少错误，可以使用固定格式：

\

ctx.save();	// 保存之前的样式
ctx.beginPath();	// 开始绘制
// ...画图
ctx.restore();	// 取出之前的样式

\

7. 移动和旋转

\

对 canvas 中图形的旋转、平移等操作，实际上是对 整个画布 进行了变换。如果不对画布进行 save() 以及 restore()，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。

\

7.1 移动 translate()

\

语法： ctx.translate(x,y)

\

该方法是移动的画布 (0, 0) 点，而不是图形。图形的 (0, 0) 点始终是相对于画布的 (0, 0) 点设置的。连续使用效果是叠加的。

\

ctx.save();
ctx.beginPath();
ctx.translate(100, 100);	// 原点移动到 (100,100) 点
ctx.translate(100, 100);	// 原点移动到 (200,200) 点
ctx.rect(0, 0, 100, 100);
ctx.fill();
ctx.restore();

\

7.2 旋转 rotate()

\

语法： ctx.rotate(deg)

\

• deg: 元素顺时针旋转的角度，以弧度为单位
• 所有图形相对于画布 (0, 0) 点转，连续使用效果是叠加的。

• 想要更改图形的旋转点，就要结合 translate(x, y) 更改画布的 (0,0) 点。

\

ctx.rotate(Math.PI / 180 * 45);	
// demo
ctx.translate(200, 200);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(0, 0, 100, 100);

\