canvas-1

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 = "cvs"></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();