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

文章目录

• • 入门
  • • 基本设置
    • 获取上下文
    • 绘制形状
    • • 矩形
      • 路径
      • • 线条
        • 圆形
        • 弧
        • 贝塞尔曲线和二次曲线
        • • 二次曲线
          • 贝塞尔曲线
          • 文本
          • 图像
          • 变换
          • • 平移
            • 旋转
            • 缩放
            • 渐变
            • • 线性渐变
              • 径向渐变
              • 图案
              • 阴影
              • 合成
              • • 全局透明度
                • 全局合成操作
                • 动画

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

                  参考：

                  • MDN 文档

                    入门

                    基本设置

                    
                      
                        Canvas 示例
                      
                      
                        
                        
                        
                      
                    
                    

                    获取上下文

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

                    绘制形状

                    矩形

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

                    路径

                    线条

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

                    圆形

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

                    弧

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

                    贝塞尔曲线和二次曲线

                    二次曲线

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

                    贝塞尔曲线

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

                    文本

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

                    图像

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

                    变换

                    平移

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

                    旋转

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

                    缩放

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

                    渐变

                    线性渐变

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

                    径向渐变

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

                    图案

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

                    阴影

                    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
                    ctx.shadowBlur = 10;
                    ctx.shadowOffsetX = 5;
                    ctx.shadowOffsetY = 5;
                    ctx.fillStyle = "red";
                    ctx.fillRect(100, 100, 100, 100);
                    

                    合成

                    全局透明度

                    ctx.globalAlpha = 0.5;
                    ctx.fillStyle = "red";
                    ctx.fillRect(100, 100, 100, 100);
                    ctx.fillStyle = "blue";
                    ctx.fillRect(150, 150, 100, 100);
                    

                    全局合成操作

                    ctx.globalCompositeOperation = "source-over"; // 默认
                    ctx.fillStyle = "red";
                    ctx.fillRect(100, 100, 100, 100);
                    ctx.globalCompositeOperation = "destination-over";
                    ctx.fillStyle = "blue";
                    ctx.fillRect(150, 150, 100, 100);
                    

                    动画

                    let x = 0;
                    function draw() {
                      ctx.clearRect(0, 0, canvas.width, canvas.height);
                      ctx.fillStyle = "blue";
                      ctx.fillRect(x, 100, 50, 50);
                      x += 2;
                      requestAnimationFrame(draw);
                    }
                    draw();
                    

                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）