Canvas终极绘制指南：从基础图形到动态交互的全链路实现

一、Canvas绘图基础架构

1.1 画布初始化

<!-- 声明512x512画布区域 -->
<canvas id="drawBoard" width="512" height="512"></canvas>

<script>
// 获取2D渲染上下文
const canvas = document.getElementById('drawBoard');
const ctx = canvas.getContext('2d');
</script>

1.2 坐标系系统实战验证

// 绘制坐标系验证线
ctx.beginPath();

// X轴（红色）
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.strokeStyle = '#FF0000';
ctx.stroke();

// Y轴（蓝色） 
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.height);
ctx.strokeStyle = '#0000FF';
ctx.stroke();

// 网格线（灰色）
ctx.setLineDash([5, 5]);
ctx.strokeStyle = '#EEE';
for(let i=50; i<canvas.width; i+=50){
  ctx.moveTo(i, 0);
  ctx.lineTo(i, canvas.height);
}
for(let j=50; j<canvas.height; j+=50){
  ctx.moveTo(0, j);
  ctx.lineTo(canvas.width, j);
}
ctx.stroke();

二、基础图形绘制技法

2.1 矩形绘制三式

// 实心矩形（位置50,50 尺寸100x80）
ctx.fillStyle = '#FF6B6B';
ctx.fillRect(50, 50, 100, 80);

// 线框矩形（线宽4px）
ctx.lineWidth = 4;
ctx.strokeStyle = '#4ECDC4';
ctx.strokeRect(200, 50, 120, 100);

// 立即绘制（组合操作）
ctx.beginPath();
ctx.rect(350, 50, 80, 80);
ctx.fill();
ctx.stroke();

2.2 圆形与弧形绘制

ctx.beginPath();
// 圆心(150,300) 半径60
// 起始角0 结束角π 逆时针
ctx.arc(150, 300, 60, 0, Math.PI, true);
ctx.lineWidth = 3;
ctx.stroke();

// 绘制3/4圆（270度）
ctx.beginPath();
ctx.arc(320, 300, 60, 0, Math.PI * 1.5);
ctx.fillStyle = '#45B7D1';
ctx.fill();

三、高级路径控制

3.1 贝塞尔曲线实战

// 二次贝塞尔（控制点坐标）
ctx.beginPath();
ctx.moveTo(50, 400);
ctx.quadraticCurveTo(150, 300, 250, 400);
ctx.strokeStyle = '#FF9F1C';
ctx.stroke();

// 三次贝塞尔（双控制点）
ctx.beginPath();
ctx.moveTo(300, 400);
ctx.bezierCurveTo(350, 350, 450, 450, 500, 400);
ctx.strokeStyle = '#2EC4B6';
ctx.stroke();

3.2 多边形组合绘制

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.lineTo(100, 200);
ctx.closePath(); // 自动闭合路径
ctx.fillStyle = 'rgba(255, 99, 71, 0.7)';
ctx.fill();

四、文本与图像处理

4.1 多模式文字渲染

// 描边文字
ctx.font = 'bold 32px "Segoe UI"';
ctx.strokeStyle = '#2A2A2A';
ctx.strokeText('Hello Canvas', 50, 500);

// 渐变填充文字
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;
ctx.fillText('Creative Coding', 50, 550);

4.2 图像合成处理

const img = new Image();
img.src = 'texture.png';
img.onload = () => {
  // 平铺背景
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 512, 512);
  
  // 图像裁剪
  ctx.beginPath();
  ctx.arc(256, 256, 100, 0, Math.PI*2);
  ctx.clip();
  ctx.drawImage(img, 150, 150, 200, 200);
};

五、动态交互实现

5.1 帧动画基础

let rotation = 0;
function animate() {
  ctx.clearRect(0, 0, 512, 512);
  
  ctx.save();
  ctx.translate(256, 256);
  ctx.rotate(rotation);
  ctx.fillStyle = '#FF6B6B';
  ctx.fillRect(-50, -50, 100, 100);
  ctx.restore();
  
  rotation += 0.02;
  requestAnimationFrame(animate);
}
animate();

5.2 点击交互示例

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI*2);
  ctx.fillStyle = '#2EC4B6';
  ctx.fill();
});

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕