28. Canvas 基础：绘制简单柱状图

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

Canvas 坐标从左上角开始，x 向右，y 向下。
绘图前常用 `clearRect` 清空画布。
复杂图表项目建议使用成熟图表库。

四、练习建议

增加横轴标签。
鼠标悬停显示当前柱子的值。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/28-canvas-chart.js，下面同步展示，方便学习和复制。

// 页面 28：Canvas 绘制柱状图
const canvas = document.querySelector('#p28-canvas');
const ctx = canvas.getContext('2d');
let chartData = [40, 72, 55, 88, 63];

function drawChart(data) {
  const width = canvas.width;
  const height = canvas.height;
  const padding = 36;
  const chartWidth = width - padding * 2;
  const chartHeight = height - padding * 2;
  const max = Math.max(...data, 100);
  const barGap = 14;
  const barWidth = (chartWidth - barGap * (data.length - 1)) / data.length;

  ctx.clearRect(0, 0, width, height);
  ctx.font = '14px Arial';
  ctx.fillStyle = '#334155';
  ctx.fillText('Monthly Leads', padding, 24);

  ctx.strokeStyle = '#cbd5e1';
  ctx.beginPath();
  ctx.moveTo(padding, padding);
  ctx.lineTo(padding, height - padding);
  ctx.lineTo(width - padding, height - padding);
  ctx.stroke();

  data.forEach((value, index) => {
    const x = padding + index * (barWidth + barGap);
    const barHeight = value / max * chartHeight;
    const y = height - padding - barHeight;

    ctx.fillStyle = '#2563eb';
    ctx.fillRect(x, y, barWidth, barHeight);
    ctx.fillStyle = '#0f172a';
    ctx.fillText(String(value), x + barWidth / 2 - 8, y - 8);
  });
}

function randomizeData() {
  chartData = chartData.map(() => Math.floor(Math.random() * 90) + 10);
  drawChart(chartData);
}

document.querySelector('#p28-random').addEventListener('click', randomizeData);
drawChart(chartData);