HTML5 Canvas 画布

精选 HTML Canvas 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。

Star 项目
关注 X (Twitter)
赞赏饮咖啡

#🚀 入门指引

#基础环境初始化 (Basic Setup)

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Example</title>
  </head>
  <body>
    <canvas
      id="myCanvas"
      width="500"
      height="400"
      style="border:1px solid #000000;"
    ></canvas>
    <script src="script.js"></script>
  </body>
</html>

#获取渲染上下文 (Context)

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

#绘制几何图形 (Drawing Shapes)

#矩形绘制 (Rectangles)

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 100); // x, y, width, height

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.strokeRect(200, 10, 150, 100); // x, y, width, height

ctx.clearRect(15, 15, 30, 30); // x, y, width, height

#路径与绘制 (Paths)

#直线连接 (Lines)

ctx.beginPath();
ctx.moveTo(50, 50); // 起始点
ctx.lineTo(200, 50); // 终点
ctx.lineTo(200, 200); // 下一条折线终点
ctx.closePath(); // 将终点自动闭合连接至起点
ctx.stroke();

#圆形绘制 (Circles)

ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();

#圆弧路径 (Arcs)

ctx.beginPath();
ctx.arc(150, 150, 75, 0, Math.PI); // x, y, radius, startAngle, endAngle
ctx.stroke();

#贝塞尔曲线与二次方曲线 (Bezier & Quadratic)

#二次方贝塞尔曲线 (Quadratic Curve)

ctx.beginPath();
ctx.moveTo(50, 250);
ctx.quadraticCurveTo(200, 100, 400, 250); // cpX, cpY, endX, endY
ctx.stroke();

#三次方贝塞尔曲线 (Bezier Curve)

ctx.beginPath();
ctx.moveTo(50, 300);
ctx.bezierCurveTo(150, 100, 350, 500, 450, 300); // cp1X, cp1Y, cp2X, cp2Y, endX, endY
ctx.stroke();

#文本绘制 (Text)

ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 50); // text, x, y

ctx.strokeText('Hello Canvas', 10, 100); // text, x, y

#图像绘制 (Images)

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, width, height
  ctx.drawImage(img, 100, 100, 100, 100, 150, 150, 200, 200); // img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
};

#画布坐标变换 (Transformations)

#平移变换 (Translation)

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

#旋转变换 (Rotation)

ctx.rotate((Math.PI / 180) * 45); // 弧度角度
ctx.fillRect(100, 100, 50, 50);

#缩放变换 (Scaling)

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

#渐变填充 (Gradients)

#线性渐变 (Linear Gradient)

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

#径向渐变 (Radial Gradient)

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

#图像图案填充 (Patterns)

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

#阴影效果 (Shadows)

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

#图层合成 (Compositing)

#全局透明度 (Global Alpha)

ctx.globalAlpha = 0.5;
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 100, 100);

#全局合成操作 (Global Composite)

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

#动画循环 (Animations)

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

#🔗 参考资源