前端 Canvas 基础绘制与动画交互实战 | 极客日志

JavaScript大前端算法

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

前端 Canvas 的核心应用场景，包括动态图形绘制、高性能动画、用户交互、数据可视化及图像处理。通过对比错误示例（如使用 setInterval 导致性能问题）与正确实践（如 requestAnimationFrame），阐述了 Canvas 在创建丰富视觉效果方面的优势。文章涵盖了基础绘图方法、动画循环机制、事件监听处理以及图表绘制逻辑，并推荐使用专业库简化开发，旨在帮助开发者掌握 Canvas 技术以提升网页视觉表现力。

片刻发布于 2026/4/5更新于 2026/4/132 浏览

前端 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 = ; }
    }, );
}

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

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);
}

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();
}

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; });
}

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);
}

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';
}