html Canvas绘图基础教程

2026-04-24 07:00:16 1396阅读 0评论

用 HTML5 Canvas 绘出你的第一幅画：从零到能用的实操指南

初见 Canvas，像在纸上直接用 JavaScript 作画，既直观又灵活。本篇不讲大框架与最佳实践，只带你从安装画布、准备笔刷到绘制基本形状与动画，一步步落地能用的案例。

一、搭建画布环境

在 HTML 文件中插入 <canvas> 元素，宽度高度可按需设置，常见为 800×600：

<canvas id="myCanvas" width="800" height="600"></canvas>

用 JavaScript 获取画布上下文，它就是绘图的“画笔”：

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

二、基础属性与笔触控制

先设定画布背景，再配置线条与填充：

ctx.fillStyle = '#f0f0f0'; // 设置填充色
ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充整个画布

ctx.strokeStyle = '#333'; // 设置线条颜色
ctx.lineWidth = 3; // 设置线宽

通过 lineCap 与 lineJoin 可调节线段末端与转折处的样式，适合画边框或细节：

ctx.lineCap = 'round'; // 线段两端为圆形
ctx.lineJoin = 'round'; // 转折处为圆角

三、绘制基本形状

1. 矩形

直接用 fillRect 与 strokeRect 绘制：

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

ctx.strokeStyle = 'red';
ctx.strokeRect(100, 100, 200, 150);

2. 圆形

用 arc 绘制圆或圆弧，先设好起始点与半径：

ctx.beginPath();
ctx.arc(400, 300, 100, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

3. 多边形

任意多边形可通过数组指定顶点，moveTo 与 lineTo 连接：

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 150);
ctx.lineTo(150, 200);
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.lineWidth = 4;
ctx.stroke();

四、文本绘制

Canvas 文本不支持多行样式复杂排版，但基础使用很简单：

ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 50);

注意 fillText 的 y 坐标是文本的基线位置，常需通过 font 的 line-height 估算视觉位置。

五、动画与交互

结合 requestAnimationFrame 实现平滑动画，并用鼠标事件记录点击位置：

let x = 100, y = 100;
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();
  requestAnimationFrame(draw);
}

draw();