Canvas是HTML5中一个重要的组件，提供了一系列接口使得可以开发者可以利用Js绘制各种图表、动画。

Canvas浏览器检测

如果你的代码需要兼容旧的浏览器，则可以如下代码来检测：

const canvas = document.querySelector("#canvas");
if (canvas.getContext) {
    // do something
} else {
    // fallback
}

或者使用Modernizr库来识别浏览器是否支持Canvas：

if (Modernizr.canvas) {
    // canvas code
} else {
    // fallback code
}

不过对于大家常用的现代浏览器来说，Canvas已经算是标配了。所以上述代码加不加其实主要看产品的需求。

Canvas 特点

Canvas提供了一系列绘图接口，且都是基于像素的，所以我们可以利用Canvas实现很多有趣的功能，比如截图、图片渲染等。常用的接口主要有画图片，文本，线条以及gradients等，Canvas还支持和CSS3 的transform类似的变换操作,不过不支持动画(animation)。

我们在使用canvas时，主要有以下几个步骤:

• 定义一个canvas元素
• 设置canvas的一些属性(如宽高等)
• 获得2d context上下文对象
• 画图

例子如下：

const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
const context = canvas.getContext("2d");
context.fillRect(0, 0, 20, 20);

document.body.appendChild(canvas);

基础知识

在Canvas中，画布的坐标空间是从左上角开始的：

所有绘制的元素都会基于原点进行定位，不过canvas中也提供了接口来变换原点位置。

矩形和椭圆

在canvas中如果你想要画矩形的话，主要有以下3个方法：

• clearRect(x, y, width, height): 清除指定矩形区域
• fillRect(x, y, width, height)： 绘制填充的矩形
• strokeRect(x, y, w, h): 绘制一个矩形边框

对于画布上下文的设置，主要利用fillStyle和strokeStyle两个属性设置颜色等样式。

const canvas = document.querySelector("#mycanvas");

const ctx = canvas.getContext("2d");

ctx.fillRect(20, 20, 100, 200); // 绘制一个宽100,高100的矩形

而要画一个椭圆的话，主要借助两个接口：

• arc(x, y, radius, startAngle, endAngle, antiClockwise)： 画一个以(x, y)为圆心，radius为半径的圆弧，从startAngle开始到endAngle结束，antiClosewise为绘制方向，默认是顺时针
• arcTo(x1, y1, x2, y2, radius)： 根据(x1, y1)和(x2, y2)，已经半径来绘制圆弧，再以直线连接两个控制点

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.arc(50, 50, 10, 0, Math.PI * 0.5, false);
ctx.fill();

线段和路径

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

• beginPath(): 新建路径，生成之后，图形绘制命令被指向到路径上生成路径
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 三次贝塞尔曲线，(cp1x,cp1y)为控制点一，(cp2x,cp2y)为控制点二，(x,y)为结束点
• closePath(): 闭合路径
• moveTo(x, y)： 移动到某个点，以这个点为基础来绘制图形
• quadraticCurveTo(cpx, cpy, x, y): 二次贝塞尔曲线，(cpx,cpy)为一个控制点，(x,y)为结束点
• stroke()： 绘制轮廓
• fill(): 填充路径内容区域

主要使用的属性有:

lineCap, lineJoin, lineWidth, miterLimit

以下是例子：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制一个三角形
ctx.beginPath(); // 生成路径
ctx.moveTo(75, 50); // 以 (75, 50)这个坐标为起点开始绘制
ctx.lineTo(100, 75); // 移动到（100，75）这个坐标画一条线
ctx.lineTo(100, 25); // 再移动到 (100, 25)这个坐标画一条线
ctx.fill(); // 填充图形，没有闭合的图形会自动闭合，所以无需调用closePath接口

文本

绘制文本我们主要用以下两种接口：

• fillText(text, x, y, [maxWidth]): 在x, y处绘制指定文本，可以选择最大宽度
• strokeText(text, x, y, [maxWidth]): 在x, y处绘制指定文本的边框，可以选择最大宽度

ctx.font = "16px serif";
ctx.strokeText("Hello", 50, 50);

图片

图片绘制也是canvas中常用的功能，可以使用如下接口来实现：

• drawImage(image, x, y, [width], [height]): 其中 image 是 image 或者 canvas 对象，(x,y)为绘制的起点

const image = new Image();
image.onload(function() {
    ctx.drawImage(image, 0, 0, 100, 100);
});
image.src = "http://xxxx";

动画

可以利用canvas绘制动画，一个动画由很多帧组成，每一帧都需要以下这些步骤：

1. 清空canvas
2. 保存canvas
3. 绘制图形
4. 恢复canvas

然后可以使用requestAnimationFrame来执行一个动画，对于旧的浏览器则使用setInterval来调用回调函数。

例子可以参考： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

Path2D

Path2D 是一个比较新的对象，利用它可以缓存和记录已有的路径信息，以便在后续复用。

主要有以下三种方式新建一个Path2D对象:

• new Path(): 空的path对象
• new Path2D(path): 克隆一个新的Path对象
• new Path2D(d): 从SVG建立Path对象, d 为svg路径字符串如： “M10 10 h 80 v 80 h -80 Z”

const ctx = canvas.getContext('2d');


    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);

接口

最后来列举一下Canvasa中所有常见的接口以及对应的功能，在忘记的时候能够快速索引到：

API 属性有：

参考资料

https://html.spec.whatwg.org/multipage/canvas.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes