【前端】一文掌握 Canvas 的具体用法（Canvas 备忘速查）

这份 HTML Canvas 快速参考备忘单列出了常见的 HTML5 Canvas 计划标签，以易读的格式呈现。
参考：

• MDN 文档
  

入门

  基本设置

1. <!DOCTYPE html>
2. <html>
3.   <head>
4.     <title>Canvas 示例</title>
5.   </head>
6.   <body>
7.     <canvas id="myCanvas" width="500" height="400"
8.       style="border:1px solid #000000;">
9.     </canvas>
10.     <script src="script.js"></script>
11.   </body>
12. </html>

复制代码

获取上下文

1. const canvas = document.getElementById("myCanvas");
3. const ctx = canvas.getContext("2d");

复制代码

绘制形状

矩形

1. ctx.fillStyle = "red";
2. ctx.fillRect(10, 10, 150, 100); // x, y, 宽度, 高度
4. ctx.strokeStyle = "blue";
5. ctx.lineWidth = 5;
6. ctx.strokeRect(200, 10, 150, 100); // x, y, 宽度, 高度
8. ctx.clearRect(15, 15, 30, 30); // x, y, 宽度, 高度

复制代码

路径

线条

1. ctx.beginPath();
2. ctx.moveTo(50, 50); // 起始点
3. ctx.lineTo(200, 50); // 结束点
4. ctx.lineTo(200, 200); // 下一个线条结束点
5. ctx.closePath(); // 将结束点连接到起始点
6. ctx.stroke();

复制代码

圆形

1. ctx.beginPath();
2. // x, y, 半径, 起始角度, 结束角度
3. ctx.arc(150, 150, 75, 0, 2 * Math.PI);
4. ctx.fillStyle = "green";
5. ctx.fill();
6. ctx.stroke();

复制代码

弧

1. ctx.beginPath();
2. // x, y, 半径, 起始角度, 结束角度
3. ctx.arc(150, 150, 75, 0, Math.PI);
4. ctx.stroke();

复制代码

贝塞尔曲线和二次曲线

二次曲线

1. ctx.beginPath();
2. ctx.moveTo(50, 250);
3. // cpX, cpY, 终点X, 终点Y
4. ctx.quadraticCurveTo(200, 100, 400, 250);
5. ctx.stroke();

复制代码

贝塞尔曲线

1. ctx.beginPath();
2. ctx.moveTo(50, 300);
3. // cp1X, cp1Y, cp2X, cp2Y, 终点X, 终点Y
4. ctx.bezierCurveTo(150, 100, 350, 500, 450, 300);
5. ctx.stroke();

复制代码

文本

1. ctx.font = "30px Arial";
2. ctx.fillStyle = "black";
3. // 文本, x, y
4. ctx.fillText("Hello Canvas", 10, 50);
5. // 文本, x, y
6. ctx.strokeText("Hello Canvas", 10, 100);

复制代码

图像

1. const img = new Image();
2. img.src = "path/to/image.jpg";
3. img.onload = () => {
4.   ctx.drawImage(img, 10, 10); // img, x, y
5.   ctx.drawImage(img, 50, 50, 100, 100); // img, x, y, 宽度, 高度
6.   ctx.drawImage(img, 100, 100, 100, 100, 150, 150, 200, 200); // img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
7. };

复制代码

变更

平移

1. ctx.translate(100, 100); // x, y
2. ctx.fillRect(0, 0, 50, 50);

复制代码

旋转

1. // 角度（以弧度为单位）
2. ctx.rotate((Math.PI / 180) * 45);
3. ctx.fillRect(100, 100, 50, 50);

复制代码

缩放

1. ctx.scale(2, 2); // x, y
2. ctx.fillRect(50, 50, 50, 50);

复制代码

渐变

线性渐变

1. const linearGradient = ctx.createLinearGradient(0, 0, 200, 0); // x0, y0, x1, y1
2. linearGradient.addColorStop(0, "red");
3. linearGradient.addColorStop(1, "blue");
4. ctx.fillStyle = linearGradient;
5. ctx.fillRect(10, 10, 200, 100);

复制代码

径向渐变

1. const radialGradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); // x0, y0, r0, x1, y1, r1
2. radialGradient.addColorStop(0, "red");
3. radialGradient.addColorStop(1, "blue");
4. ctx.fillStyle = radialGradient;
5. ctx.fillRect(10, 10, 200, 100);

复制代码

图案

1. const img = new Image();
2. img.src = "path/to/image.jpg";
3. img.onload = () => {
4.   // 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
5.   const pattern = ctx.createPattern(img, "repeat");
6.   ctx.fillStyle = pattern;
7.   ctx.fillRect(0, 0, 300, 300);
8. };

复制代码

阴影

1. ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
2. ctx.shadowBlur = 10;
3. ctx.shadowOffsetX = 5;
4. ctx.shadowOffsetY = 5;
6. ctx.fillStyle = "red";
7. ctx.fillRect(100, 100, 100, 100);

复制代码

合成

全局透明度

1. ctx.globalAlpha = 0.5;
2. ctx.fillStyle = "red";
3. ctx.fillRect(100, 100, 100, 100);
5. ctx.fillStyle = "blue";
6. ctx.fillRect(150, 150, 100, 100);

复制代码

全局合成操作

1. ctx.globalCompositeOperation = "source-over"; // 默认
2. ctx.fillStyle = "red";
3. ctx.fillRect(100, 100, 100, 100);
5. ctx.globalCompositeOperation = "destination-over";
6. ctx.fillStyle = "blue";
7. ctx.fillRect(150, 150, 100, 100);

复制代码

动画

1. let x = 0;
2. function draw() {
3.   ctx.clearRect(0, 0, canvas.width, canvas.height);
4.   ctx.fillStyle = "blue";
5.   ctx.fillRect(x, 100, 50, 50);
6.   x += 2;
7.   requestAnimationFrame(draw);
8. }
9. draw();

复制代码