一、Canvas核心技术要点

实现动态图表需要掌握的Canvas核心API：

• beginPath()/closePath() – 路径控制
• fillStyle/strokeStyle – 样式设置
• arc()/rect() – 基本图形绘制
• requestAnimationFrame – 动画控制
• transform() – 坐标变换

二、电商数据看板案例

1. HTML基础结构

<div class="dashboard">
    <canvas id="salesChart" width="800" height="400"></canvas>
    <canvas id="userChart" width="400" height="400"></canvas>
    <div class="controls">
        <button id="refreshBtn">刷新数据</button>
    </div>
</div>

2. 柱状图实现核心代码

function drawBarChart(data) {
    const canvas = document.getElementById('salesChart');
    const ctx = canvas.getContext('2d');
    
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制坐标轴
    ctx.beginPath();
    ctx.moveTo(50, 30);
    ctx.lineTo(50, 350);
    ctx.lineTo(750, 350);
    ctx.stroke();
    
    // 绘制柱状图
    const barWidth = 40;
    const gap = 30;
    data.forEach((item, index) => {
        const x = 100 + index * (barWidth + gap);
        const height = item.value * 3;
        
        ctx.fillStyle = `hsl(${index * 60}, 70%, 50%)`;
        ctx.fillRect(x, 350 - height, barWidth, height);
        
        // 绘制文字
        ctx.fillStyle = '#333';
        ctx.fillText(item.month, x, 370);
    });
}

3. 动态数据更新

// 模拟API数据获取
async function fetchData() {
    const response = await fetch('/api/sales-data');
    return await response.json();
}

// 刷新按钮事件
document.getElementById('refreshBtn').addEventListener('click', async () => {
    const data = await fetchData();
    drawBarChart(data);
    drawPieChart(data.userData);
});

// 初始加载
window.addEventListener('load', () => {
    fetchData().then(data => {
        drawBarChart(data);
        drawPieChart(data.userData);
    });
});

三、性能优化技巧

1. 使用willReadFrequently属性提升读取性能：

   const ctx = canvas.getContext('2d', { willReadFrequently: true });

2. 复杂图表使用离屏Canvas预渲染
3. 高频动画使用transform代替重绘
4. 大数据量时采用分帧渲染策略

四、进阶扩展方向

• 响应式适配：监听resize事件重绘图表
• 添加交互动画：鼠标悬停显示数据详情
• Web Worker处理大数据计算
• 与SVG混合使用实现特殊效果