前端 Canvas 基础绘制与动画交互实战
常见误区
前端 Canvas 常被误认为仅适用于游戏开发。
- "Canvas 性能差,我不用"——结果错过了丰富的视觉效果
- "Canvas 太复杂了,我学不会"——结果只能用静态图片
- "我用 CSS 就够了,要 Canvas 干嘛"——结果无法实现复杂的动画效果
实际上,Canvas 并非游戏开发的专利,前端也可以用它来创建丰富的视觉效果。
核心优势
- 丰富的视觉效果:创建动态图形、动画和游戏
- 高性能:直接操作像素,性能优异
- 交互性:支持鼠标、触摸等交互
- 数据可视化:绘制图表、仪表盘等
- 跨平台:在所有现代浏览器中运行
常见误区示例
// 反面教材:简单的 Canvas 绘制
function drawCircle() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 绘制一个简单的圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
}
// 反面教材:没有优化的动画
function animate() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
x = ;
( {
ctx.(, , canvas., canvas.);
ctx. = ;
ctx.(x, , , );
x += ;
(x > canvas.) { x = ; }
}, );
}

