使用Canvas绘制图表需先创建画布，再通过JavaScript获取2D上下文，利用绘图方法绘制图形。1. 定义canvas标签设置宽高作为绘图容器；2. 用getElementById获取canvas元素，调用getContext('2d')获得绘图上下文ctx；3. 使用fillRect、lineTo、arc等方法绘制矩形、线条、圆弧，并设置fillStyle等样式；4. 示例中遍历数据数组，用fillRect绘制三个高度不同的柱子，注意Y轴方向向下；5. 添加坐标轴和文字标签提升可读性，用stroke画轴线，fillText添加刻度文本。虽然Canvas灵活，但复杂图表推荐使用Chart.js等封装库。掌握Canvas有助于理解图表底层机制。
在HTML5网页中绘制图表，最常用的方式是使用<canvas>元素结合JavaScript进行绘图。Canvas提供了一个位图画布，可以通过脚本（通常是JavaScript）动态绘制图形、线条、文本和图像，非常适合用来制作柱状图、折线图、饼图等数据可视化内容。
1. 创建Canvas画布
要在网页中使用Canvas绘图，首先要定义一个<canvas>标签，并设置其宽度和高度。
示例代码：
<canvas id="myChart" width="400" height="300"></canvas>
这个画布将作为绘图的容器。通过JavaScript获取上下文后即可开始绘图。
立即学习“前端免费学习笔记（深入）”；
2. 获取绘图上下文
Canvas本身只是一个容器，真正的绘图操作需要通过JavaScript获取“绘图上下文”对象。通常使用2D渲染上下文。
示例代码：
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');
ctx 就是绘图的核心对象，所有绘制命令都通过它来执行。
3. 绘制基本图形
有了上下文后，就可以绘制各种基础图形，这些图形可组合成图表。
常见绘图方法包括：
-
绘制矩形： 使用
fillRect(x, y, width, height)填充矩形，常用于柱状图的柱子。 -
绘制线条： 使用
beginPath()、moveTo()、lineTo()和stroke()来画折线图的线条。 -
绘制圆弧： 使用
arc(x, y, radius, startAngle, endAngle, anticlockwise)可以画饼图的扇形。 -
设置样式： 用
fillStyle设置填充颜色，strokeStyle设置描边颜色，lineWidth设置线条粗细。
4. 绘制一个简单的柱状图示例
以下是一个绘制三组数据柱状图的简单例子：
const data = [60, 90, 120]; // 柱子的高度代表数值
const barWidth = 50;
const barSpacing = 30;
let x = 50;
<p>ctx.fillStyle = 'steelblue';</p><p>data.forEach(value => {
ctx.fillRect(x, 300 - value, barWidth, value);
x += barWidth + barSpacing;
});</p>这段代码从左到右绘制三个蓝色柱子，高度对应数据值。Y轴方向注意：Canvas的原点在左上角，Y值向下增大，所以柱子的起点是 300 - value。
5. 添加坐标轴和文字标签
为了让图表更清晰，可以添加坐标轴和文字说明。
使用 stroke() 方法画线表示坐标轴，用 fillText(text, x, y) 添加文字标签。
// 画X轴
ctx.beginPath();
ctx.moveTo(40, 300);
ctx.lineTo(40, 20);
ctx.stroke();
<p>// 画Y轴
ctx.moveTo(40, 300);
ctx.lineTo(380, 300);
ctx.stroke();</p><p>// 添加文字
ctx.fillText('0', 30, 305);
ctx.fillText('50', 30, 255);
ctx.fillText('100', 30, 205);</p>基本上就这些核心步骤。虽然Canvas提供了强大的绘图能力，但绘制复杂图表需要手动处理布局、颜色、交互等细节。对于生产环境中的复杂图表，建议结合使用如Chart.js等基于Canvas的图表库，它们封装了底层操作，使用更高效。不过掌握Canvas基础，有助于你自定义图表或理解底层原理。
