canvas常用方法总结

常用绘图方法

路径绘制

beginPath()：开始新的路径
moveTo(x, y)：移动到指定点
lineTo(x, y)：从当前点画直线到指定点
arc(x, y, radius, startAngle, endAngle)：画圆弧
closePath()：闭合路径

样式设置

fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle：设置或返回用于笔触的颜色、渐变或模式
lineWidth：设置线条宽度

形状绘制

fill()：填充当前路径
stroke()：绘制当前路径的边框
fillRect(x, y, width, height)：绘制填充矩形
strokeRect(x, y, width, height)：绘制矩形边框
clearRect(x, y, width, height)：清除指定矩形区域

文本绘制

fillText(text, x, y)：绘制填充文本
strokeText(text, x, y)：绘制文本边框
font：设置字体样式
textAlign：设置文本对齐方式
textBaseline：设置文本基线

图像绘制

drawImage(image, x, y)：绘制图像
createImageData(width, height)：创建新的 ImageData 对象
putImageData(imageData, x, y)：将图像数据绘制到画布上

变换操作

translate(x, y)：平移坐标系
rotate(angle)：旋转坐标系
scale(x, y)：缩放坐标系
transform(a, b, c, d, e, f)：变换矩阵
setTransform(a, b, c, d, e, f)：重置变换矩阵

保存和恢复状态

save()：保存当前状态
restore()：恢复之前保存的状态

渐变

createLinearGradient(x1, y1, x2, y2)：创建线性渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)：创建径向渐变
addColorStop(offset, color)：添加颜色停止点

合成

globalAlpha：设置或返回全局 alpha 值（透明度）
globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上

动画

使用 requestAnimationFrame() 实现动画效果
通常需要清空画布并重新绘制图形来实现动画帧更新

示例1：绘制一个简单的矩形

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制一个蓝色填充矩形
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);

  // 绘制一个红色边框矩形
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.strokeRect(50, 50, 100, 100);
</script>

矩形

示例2：绘制一颗向日葵

向日葵由三部分组成：
花瓣：使用 arc() 方法绘制 12 个围绕中心点旋转的黄色半圆
花盘：使用 arc() 方法绘制一个棕色圆形
茎和叶：使用 lineTo() 和 quadraticCurveTo() 方法绘制绿色茎和叶子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draw a Sunflower</title>
  <style>
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="sunflowerCanvas" width="500" height="500"></canvas>

  <script>
    const canvas = document.getElementById('sunflowerCanvas');
    const ctx = canvas.getContext('2d');

    // Draw sunflower petals
    function drawPetals(x, y, radius) {
      ctx.save();
      ctx.translate(x, y);
      for (let i = 0; i < 12; i++) {
        ctx.rotate(Math.PI / 6);
        ctx.beginPath();
        ctx.arc(0, -radius, radius / 2, 0, Math.PI * 2);
        ctx.fillStyle = '#FFD700';
        ctx.fill();
      }
      ctx.restore();
    }

    // Draw sunflower center
    function drawCenter(x, y, radius) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.fillStyle = '#A0522D';
      ctx.fill();
    }

    // Draw sunflower stem
    function drawStem(x, y, length) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x, y + length);
      ctx.strokeStyle = '#228B22';
      ctx.lineWidth = 4;
      ctx.stroke();

      // Add some leaf
      ctx.beginPath();
      ctx.moveTo(x, y + length * 0.6);
      ctx.quadraticCurveTo(x - 20, y + length * 0.5, x, y + length * 0.4);
      ctx.quadraticCurveTo(x + 20, y + length * 0.5, x, y + length * 0.6);
      ctx.fillStyle = '#3CB371';
      ctx.fill();
    }

    // Draw the complete sunflower
    function drawSunflower(x, y) {
      const centerRadius = 30;
      const petalRadius = 40;

      drawStem(x, y + centerRadius, 200);
      drawCenter(x, y, centerRadius);
      drawPetals(x, y, petalRadius);
    }

    // Draw a sunflower at position (250, 100)
    drawSunflower(250, 100);
  </script>
</body>
</html>

向日葵