前端 Canvas 基础绘制与动画交互实现

前端 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.fillStyle = 'blue';
        ctx.fillRect(x, 50, 50, 50);
        x += 1;
        if (x > canvas.width) {
            x = 0;
        }
    }, 16);
}

基础绘制

Canvas 支持绘制矩形、圆形、路径和文本等基本图形。

// 正确的做法：Canvas 基础绘制
function basicDrawing() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // 设置画布尺寸
    canvas.width = 800;
    canvas.height = 600;
    // 绘制矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 100);
    // 绘制圆形
    ctx.beginPath();
    ctx.arc(250, 100, 50, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    // 绘制路径
    ctx.beginPath();
    ctx.moveTo(350, 50);
    ctx.lineTo(450, 150);
    ctx.lineTo(350, 150);
    ctx.closePath();
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 2;
    ctx.stroke();
    // 绘制文本
    ctx.font = '24px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('Canvas 绘制示例', canvas.width / 2, 30);
}

动画效果

推荐使用 requestAnimationFrame 实现流畅的动画效果。

// 正确的做法：Canvas 动画
function canvasAnimation() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    let x = 0;
    let y = canvas.height / 2;
    let dx = 2;
    let dy = 2;
    const radius = 20;

    function animate() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制移动的圆形
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = 'purple';
        ctx.fill();
        // 边界检测
        if (x + radius > canvas.width || x - radius < 0) {
            dx = -dx;
        }
        if (y + radius > canvas.height || y - radius < 0) {
            dy = -dy;
        }
        // 更新位置
        x += dx;
        y += dy;
        // 使用 requestAnimationFrame
        requestAnimationFrame(animate);
    }
    animate();
}

交互操作

通过监听鼠标事件实现绘图交互。

// 正确的做法：Canvas 交互
function canvasInteraction() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    // 鼠标按下事件
    canvas.addEventListener('mousedown', (e) => {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });

    // 鼠标移动事件
    canvas.addEventListener('mousemove', (e) => {
        if (!isDrawing) return;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });

    // 鼠标释放事件
    canvas.addEventListener('mouseup', () => {
        isDrawing = false;
    });

    // 鼠标离开事件
    canvas.addEventListener('mouseout', () => {
        isDrawing = false;
    });
}

数据可视化

利用 Canvas 绘制图表展示数据。

// 正确的做法：Canvas 数据可视化
function canvasChart() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    // 数据
    const data = [12, 19, 3, 5, 2, 3, 7, 11, 15, 18, 10, 6];
    const labels = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'];
    // 绘制坐标系
    const padding = 50;
    const chartWidth = canvas.width - padding * 2;
    const chartHeight = canvas.height - padding * 2;
    // X 轴
    ctx.beginPath();
    ctx.moveTo(padding, canvas.height - padding);
    ctx.lineTo(canvas.width - padding, canvas.height - padding);
    ctx.stroke();
    // Y 轴
    ctx.beginPath();
    ctx.moveTo(padding, padding);
    ctx.lineTo(padding, canvas.height - padding);
    ctx.stroke();
    // 绘制数据
    const maxValue = Math.max(...data);
    const barWidth = chartWidth / data.length;
    data.forEach((value, index) => {
        const barHeight = (value / maxValue) * chartHeight;
        const x = padding + index * barWidth;
        const y = canvas.height - padding - barHeight;
        // 绘制柱子
        ctx.fillStyle = 'rgba(54, 162, 235, 0.6)';
        ctx.fillRect(x + 5, y, barWidth - 10, barHeight);
        // 绘制标签
        ctx.font = '12px Arial';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText(labels[index], x + barWidth / 2, canvas.height - padding + 15);
    });
    // 绘制标题
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('月度销售数据', canvas.width / 2, padding / 2);
}

图像处理

支持像素级操作，如灰度滤镜。

// 正确的做法：Canvas 图像处理
function canvasImageProcessing() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    // 加载图像
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
        // 绘制原始图像
        ctx.drawImage(img, 0, 0, 400, 300);
        // 获取图像数据
        const imageData = ctx.getImageData(0, 0, 400, 300);
        const data = imageData.data;
        // 处理图像（灰度）
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const gray = (r + g + b) / 3;
            data[i] = gray;
            data[i + 1] = gray;
            data[i + 2] = gray;
        }
        // 绘制处理后的图像
        ctx.putImageData(imageData, 400, 0);
    };
    img.src = 'https://picsum.photos/800/600';
}

总结

• 基础绘制：矩形、圆形、路径、文本等
• 动画效果：使用 requestAnimationFrame 实现流畅动画
• 交互操作：鼠标、触摸等事件处理
• 数据可视化：绘制图表、仪表盘等
• 图像处理：像素级操作，实现滤镜效果
• 性能优化：合理使用缓存、避免频繁重绘
• 响应式：根据容器大小调整画布尺寸
• 工具库：使用 Chart.js、Fabric.js 等库简化开发