前端 Canvas 基础绘制与动画交互实现
常见误区
在 Canvas 开发中,常见的误区包括性能未优化、使用 setInterval 而非 requestAnimationFrame 导致动画卡顿等。
// 反面教材:简单的 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');
let x = 0;
setInterval(() => {
// 每次都清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制移动的矩形
ctx. = ;
ctx.(x, , , );
x += ;
(x > canvas.) {
x = ;
}
}, );
}

