JavaScript Canvas通过创建canvas元素并获取2D上下文实现绘图，支持矩形、路径、圆形等基本图形绘制，利用requestAnimationFrame实现高效动画循环，结合鼠标事件坐标转换实现交互响应，是网页动态图形与数据可视化的关键技术。
想在网页上实现动态图形、游戏或数据可视化，JavaScript Canvas 是绕不开的核心技术。它不依赖额外插件，直接在 HTML 页面绘制像素级图形。下面通过实战角度带你掌握关键用法和常见技巧。
创建Canvas并获取绘图上下文
使用 Canvas 第一步是创建 canvas 元素，并获取 2D 渲染上下文对象。
<canvas id="myCanvas" width="800" height="600"></canvas>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
注意设置 width 和 height 属性，而不是用 CSS 拉伸，否则会导致图像模糊。getContext('2d') 返回的 ctx 对象是所有绘图操作的入口。
绘制基本图形
Canvas 提供了绘制矩形、路径、圆形等基础形状的方法。
立即学习“Java免费学习笔记（深入）”；
- 矩形：fillRect 绘制实心矩形，strokeRect 绘制边框，clearRect 清除区域。
- 路径与线条：使用 beginPath() 开始路径，moveTo 定位起点，lineTo 画线，closePath 闭合路径，最后用 stroke 或 fill 渲染。
- 圆形/弧线：arc(x, y, radius, startAngle, endAngle, anticlockwise) 可画圆或扇形。
例如画一个红色圆：
ctx.beginPath();
ctx.arc(400, 300, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
动画实现原理：requestAnimationFrame
让图形动起来的关键是循环重绘。requestAnimationFrame 比 setInterval 更高效，能适配屏幕刷新率。
基本结构如下：
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
// 更新图形位置或状态
ctx.fillRect(x, y, 40, 40);
x += dx; // 位置变化
requestAnimationFrame(animate);
}
animate();
清屏是关键步骤，否则会留下残影。控制 x、y 等变量实现移动、旋转或缩放效果。
交互与事件响应
Canvas 本身不记录图形，所以点击检测需要手动计算坐标。常用方法是监听鼠标事件并转换坐标。
例如判断点是否在矩形内：
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (x > 100 && x 100 && y
console.log('点击了目标区域');
}
});
复杂图形可用路径包围盒或数学公式判断是否命中。
性能优化建议
当绘制大量对象时，性能容易下降。几个实用技巧：
- 减少不必要的重绘，只更新变化区域。
- 避免频繁切换绘图样式（如 fillStyle），批量处理同类图形。
- 离屏 Canvas 预渲染静态内容，再合成到主画布。
- 控制动画帧率，必要时用 if (frame % 3 === 0) 降低更新频率。
基本上就这些。掌握绘图、动画循环和交互处理，就能构建出丰富的视觉应用。多练习绘制图表、粒子系统或小游戏，技能会快速提升。
