2021-05-16

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();

 

 

 

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 执行的操作对后续的绘制有影响。

 

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

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);

8.例题演示

绘制一个旋转的太极图案

<!DOCTYPE html>
<html lang="en">
<style>
    canvas {
        background-color: rgb(121, 118, 118);
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="600" height="600" style="border:1px solid" id="canvas">

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

            i+=1;
            ctx.save();
            ctx.clearRect(0, 0, 600, 600);
            ctx.translate(300, 300);
            ctx.rotate(Math.PI / 180 * i);

            //大半黑
            ctx.beginPath();
            ctx.arc(0, 0, 300, 0, Math.PI / 180 * 180, false);
            // ctx.stroke();
            ctx.fillStyle = "black";
            ctx.fill();

            //大白半
            ctx.beginPath();
            ctx.arc(0, 0, 300, 0, Math.PI / 180 * 180, true);
            // ctx.stroke();
            ctx.fillStyle = "white";
            ctx.fill();

            //中白
            ctx.beginPath();
            ctx.arc(-150, 0, 150, 0, Math.PI / 180 * 360, false);
            // ctx.stroke();
            ctx.fillStyle = "white";
            ctx.fill();

            //中黑
            ctx.beginPath();
            ctx.arc(150, 0, 150, 0, Math.PI / 180 * 360, false);
            // ctx.stroke();
            ctx.fillStyle = "black";
            ctx.fill();

            //小黑
            ctx.beginPath();
            ctx.arc(-150, 0, 20, 0, Math.PI / 180 * 360, false);
            // ctx.stroke();
            ctx.fillStyle = "black";
            ctx.fill();


            //小白
            ctx.beginPath();
            ctx.arc(150, 0, 20, 0, Math.PI / 180 * 360, false);
            // ctx.stroke();
            ctx.fillStyle = "white";
            ctx.fill();


            // ctx.fillRect(-50, -50, 100, 100);
            ctx.restore()
        }, 1)
    </script>
</body>

</html>