HTML5的Canvas元素是前端实现网页绘图的核心载体，它提供了一个可以通过JavaScript动态绘制图形的矩形区域，支持绘制路径、矩形、圆形、文本以及添加图像等多种操作，是开发数据可视化图表的重要基础工具。
Canvas基础概念与初始化
Canvas本身是HTML5新增的一个块级元素，默认情况下它没有边框和内容，需要配合JavaScript才能绘制出具体图形。使用Canvas的第一步是在HTML中定义该元素，并为其设置合适的宽度和高度。
需要注意，Canvas的宽度和高度应该通过元素的属性设置，而不是通过CSS样式设置，通过CSS设置会导致绘制的图形出现拉伸变形问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas绘图示例</title>
</head>
<body>
<!-- 定义Canvas元素，设置宽高属性 -->
<canvas id="chartCanvas" width="800" height="400">
您的浏览器不支持Canvas元素，请升级浏览器版本
</canvas>
</body>
</html>
获取Canvas绘图上下文
定义好Canvas元素后，需要通过JavaScript获取该元素的上下文对象，上下文对象是实际执行绘图操作的接口。常用的上下文类型是2d，对应二维平面绘图。
// 获取Canvas元素
const canvas = document.getElementById('chartCanvas');
// 判断浏览器是否支持Canvas
if (!canvas.getContext) {
console.log('当前浏览器不支持Canvas');
return;
}
// 获取2d绘图上下文
const ctx = canvas.getContext('2d');
Canvas常用基础绘图API
获取到上下文后，就可以调用对应的API完成绘图操作，以下是绘制图表常用的基础API：
- 设置填充与描边样式：
fillStyle设置填充颜色，strokeStyle设置描边颜色，支持颜色值、渐变、图案等。 - 绘制矩形：
fillRect(x, y, width, height)绘制填充矩形，strokeRect(x, y, width, height)绘制描边矩形。 - 绘制路径：
beginPath()开始新路径，moveTo(x, y)移动画笔到指定坐标，lineTo(x, y)绘制直线到指定坐标，stroke()描边路径，fill()填充路径。 - 绘制文本：
fillText(text, x, y)绘制填充文本，strokeText(text, x, y)绘制描边文本，font设置文本字体样式。 - 绘制圆形：
arc(x, y, radius, startAngle, endAngle, anticlockwise)绘制圆弧，配合路径API可以绘制完整的圆形。
使用Canvas绘制折线图完整示例
下面通过一个完整的折线图绘制示例，展示从坐标轴绘制到数据折线渲染的完整流程，假设我们要展示一周内的用户访问量数据。
// 定义图表数据
const chartData = {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
values: [120, 200, 150, 280, 190, 320, 260]
};
// 图表配置
const config = {
padding: 40, // 内边距
axisColor: '#333', // 坐标轴颜色
lineColor: '#1E90FF', // 折线颜色
pointColor: '#FF4500', // 数据点颜色
gridColor: '#eee' // 网格线颜色
};
// 计算绘图区域尺寸
const chartWidth = canvas.width - config.padding * 2;
const chartHeight = canvas.height - config.padding * 2;
// 绘制坐标轴
function drawAxis() {
ctx.strokeStyle = config.axisColor;
ctx.lineWidth = 2;
// 绘制Y轴
ctx.beginPath();
ctx.moveTo(config.padding, config.padding);
ctx.lineTo(config.padding, canvas.height - config.padding);
ctx.stroke();
// 绘制X轴
ctx.beginPath();
ctx.moveTo(config.padding, canvas.height - config.padding);
ctx.lineTo(canvas.width - config.padding, canvas.height - config.padding);
ctx.stroke();
}
// 绘制网格线
function drawGrid() {
ctx.strokeStyle = config.gridColor;
ctx.lineWidth = 1;
// 横向网格线，5条
const yStep = chartHeight / 5;
for (let i = 0; i <= 5; i++) {
const y = canvas.height - config.padding - i * yStep;
ctx.beginPath();
ctx.moveTo(config.padding, y);
ctx.lineTo(canvas.width - config.padding, y);
ctx.stroke();
}
// 纵向网格线，对应7个数据点
const xStep = chartWidth / (chartData.labels.length - 1);
for (let i = 0; i < chartData.labels.length; i++) {
const x = config.padding + i * xStep;
ctx.beginPath();
ctx.moveTo(x, config.padding);
ctx.lineTo(x, canvas.height - config.padding);
ctx.stroke();
}
}
// 绘制坐标轴标签
function drawLabels() {
ctx.fillStyle = '#666';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
// X轴标签
const xStep = chartWidth / (chartData.labels.length - 1);
chartData.labels.forEach((label, index) => {
const x = config.padding + index * xStep;
ctx.fillText(label, x, canvas.height - config.padding + 20);
});
// Y轴标签，最大值取数据最大值向上取整
const maxValue = Math.max(...chartData.values);
const yStepValue = Math.ceil(maxValue / 5);
const yStep = chartHeight / 5;
ctx.textAlign = 'right';
for (let i = 0; i <= 5; i++) {
const value = i * yStepValue;
const y = canvas.height - config.padding - i * yStep;
ctx.fillText(value, config.padding - 10, y + 4);
}
}
// 绘制折线
function drawLine() {
const maxValue = Math.max(...chartData.values);
const xStep = chartWidth / (chartData.labels.length - 1);
ctx.strokeStyle = config.lineColor;
ctx.lineWidth = 2;
ctx.beginPath();
chartData.values.forEach((value, index) => {
const x = config.padding + index * xStep;
// 计算Y坐标，注意Canvas的Y轴向下为正
const y = canvas.height - config.padding - (value / maxValue) * chartHeight;
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.stroke();
}
// 绘制数据点
function drawPoints() {
const maxValue = Math.max(...chartData.values);
const xStep = chartWidth / (chartData.labels.length - 1);
ctx.fillStyle = config.pointColor;
chartData.values.forEach((value, index) => {
const x = config.padding + index * xStep;
const y = canvas.height - config.padding - (value / maxValue) * chartHeight;
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fill();
});
}
// 执行所有绘制步骤
drawGrid();
drawAxis();
drawLabels();
drawLine();
drawPoints();
Canvas绘图注意事项
在实际使用Canvas绘制图表时，还需要注意以下几点：
- Canvas绘制的是位图，放大后会出现模糊，高分辨率屏幕下可以通过设置Canvas的
width和height属性为显示尺寸的两倍，再通过CSS缩小显示来提升清晰度。 - Canvas的绘图操作是即时生效的，没有状态保存机制，如果需要实现图表交互，比如点击数据点显示详情，需要自己记录所有绘制元素的坐标范围，通过判断点击坐标来实现。
- 如果图表数据需要动态更新，不需要清空整个Canvas，只需要重新计算数据后再次执行对应的绘图逻辑即可，频繁重绘时可以考虑使用
requestAnimationFrame优化性能。
Canvas除了绘制图表外，还可以实现动画、游戏画面、图像编辑等复杂功能，掌握其基础绘图逻辑后，可以结合更多API实现更丰富的网页视觉效果。