[JS] canvas 详解
卢和昶
创建 canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<canvas width="500" height="500">You browser doesn't support canvas</canvas>
<script>
const cvs = document.querySelector('canvas')
const context = cvs.getContext('2d')
</script>
</body>
</html>
可以通过 width 和 height 设置 canvas 的宽高（不带 px 单位），然后在 js 代码中获取 canvas 元素，调用 canvas.getContext('2d') 获取 2d 上下文。
简单绘图
可以通过 canvas context 的如下属性对图形的填充和描边进行设置：
context.fillStyle图形的填充颜色，可以是十六进制颜色、rgb、颜色单词等context.strokeStyle描边颜色，可取值同上context.lineWidth线条宽度，不带 px 单位context.fillRect(x, y, width, height)绘画指定颜色填充的矩形context.strokeRect(x, y, width, height)描边指定颜色的矩形context.clearRect(x, y, width, height)清除指定区域的矩形，可以用来初始化画布、挖空图形
直接绘制矩形
context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 在 (0, 0) 处绘制一个宽高为 100px 的正方形
context.fillRect(0, 0, 100, 100)
// 在 (200, 200) 处描边一个宽高为 100px 的正方形
context.strokeRect(200, 200, 100, 100)
// 清除所有图形（初始化画布）
context.clearRect(0, 0, 500, 500)
绘制路径
以下所有方法调用前，都必须使用 context.beginPath() 方法来声明开始绘制路径。
context.arc(x, y, radius, startAngle, endAngle, counterclockwise)以 (x, y) 为圆心，radius 为半径，绘制指定起始角度到结束角度的弧线，counterclockwise表示是否以逆时针计算起始角和结束角。可以设置startAngle=0，endAngle=2 * Math.PI绘制一个圆形。context.moveTo(x, y)将光标移动到 (x, y)context.lineTo(x, y)从当前光标起始位置绘制到 (x, y) 的线条context.rect(x, y, width, height)以 (x, y) 为起点创建一个矩形路径，和fillRect的区别是这个方法不会绘制实际的图形arcTo(x1, y1, x2, y2, radius)以给定半径 radius，经由(x1, y1)绘制一条从上一点
到(x2, y2)的弧线
创建路径之后，可以使用 closePath() 方法绘制一条返回起点的线。如果路径已经完成，则既可以指定 fillStyle 属性并调用 fill() 方法来填充路径，也可以指定 strokeStyle 属性并调用 stroke() 方法来描画路径，还可以调用 clip() 方法基于已有路径创建一个新剪切区域。
绘制文本
绘制文本主要用下面两个方法：
fillTextstrokeText
这两个方法的参数都是 str、x、y、maxWidth，表示要绘制的字符串的 x、y 坐标和最大宽度。
此外，最终绘制的文本还和 context 设置的文本格式有关：
// 字体
context.font = "bold 14px Arial";
// 在坐标中的对齐方式，如下是正常的对齐方式
context.textAlign = "center";
context.textBaseline = "middle";
变换、阴影、渐变
不想记了，见 MDN
类似资料：