html5canvas提供了丰富的图形绘制接口，开发者可以通过JavaScript调用相关方法在画布上渲染各类基础图形，矩形和圆形是最常用的两种基础图形，路径操作则是实现复杂图形的基础。
canvas基础环境准备
在使用canvas绘制图形前，需要先完成画布的基础配置，首先在HTML中定义<canvas>标签，再通过JavaScript获取画布上下文。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>canvas图形绘制</title>
</head>
<body>
<!-- 定义画布，设置宽高 -->
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
// 获取画布元素
const canvas = document.getElementById('myCanvas');
// 获取2d绘制上下文
const ctx = canvas.getContext('2d');
</script>
</body>
</html>
矩形绘制方法
canvas提供了三种绘制矩形的方式，分别对应填充矩形、描边矩形和清除矩形区域，三种方法都接收四个参数，分别是矩形左上角的x坐标、y坐标、矩形宽度和高度。
1. 填充矩形
使用fillRect()方法可以绘制填充颜色的矩形，默认填充颜色为黑色，也可以通过fillStyle属性自定义填充色。
// 设置填充颜色为蓝色 ctx.fillStyle = '#409eff'; // 绘制左上角坐标(50,50)，宽200，高100的填充矩形 ctx.fillRect(50, 50, 200, 100);
2. 描边矩形
使用strokeRect()方法可以绘制只有边框的矩形，默认边框颜色为黑色，边框宽度默认1px，可通过strokeStyle和lineWidth属性自定义样式。
// 设置边框颜色为红色 ctx.strokeStyle = '#f56c6c'; // 设置边框宽度为3px ctx.lineWidth = 3; // 绘制左上角坐标(50,200)，宽200，高100的描边矩形 ctx.strokeRect(50, 200, 200, 100);
3. 清除矩形区域
使用clearRect()方法可以清除画布上指定矩形区域的内容，相当于把该区域变成透明。
// 清除左上角坐标(100,100)，宽50，高50的区域内容 ctx.clearRect(100, 100, 50, 50);
圆形绘制方法
canvas没有直接的圆形绘制方法，需要通过路径操作实现，核心是使用arc()方法绘制圆弧，当圆弧角度为2π时就是完整的圆形。
arc()方法参数说明
arc(x, y, radius, startAngle, endAngle, anticlockwise)方法的参数含义如下：
- x：圆弧圆心的x坐标
- y：圆弧圆心的y坐标
- radius：圆弧的半径
- startAngle：圆弧起始角度，单位是弧度
- endAngle：圆弧结束角度，单位是弧度
- anticlockwise：可选参数，是否逆时针绘制，默认false为顺时针
注意canvas中角度转弧度的公式为：弧度 = 角度 * Math.PI / 180。
填充圆形实现
// 开始新路径 ctx.beginPath(); // 绘制圆心(350,100)，半径50，从0到2π的圆弧（完整圆形） ctx.arc(350, 100, 50, 0, 2 * Math.PI); // 设置填充颜色为绿色 ctx.fillStyle = '#67c23a'; // 填充路径 ctx.fill();
描边圆形实现
// 开始新路径 ctx.beginPath(); // 绘制圆心(350,300)，半径50的圆形 ctx.arc(350, 300, 50, 0, 2 * Math.PI); // 设置描边颜色为橙色 ctx.strokeStyle = '#e6a23c'; // 设置描边宽度 ctx.lineWidth = 4; // 描边路径 ctx.stroke();
路径基础操作
路径是canvas绘制复杂图形的基础，所有不在预设矩形、圆形方法内的图形都需要通过路径操作实现，核心路径方法如下：
| 方法 | 作用 |
|---|---|
beginPath() | 开始一条新路径，清除之前的路径内容 |
closePath() | 闭合当前路径，从当前点到路径起点绘制一条直线 |
moveTo(x,y) | 将绘制起点移动到指定坐标，不绘制线条 |
lineTo(x,y) | 从当前点到指定坐标绘制一条直线 |
fill() | 填充当前路径内部区域 |
stroke() | 描边当前路径的轮廓 |
自定义三角形绘制示例
通过路径操作可以绘制任意多边形，以下是绘制三角形的示例：
// 开始新路径 ctx.beginPath(); // 移动到起点(200,50) ctx.moveTo(200, 50); // 绘制到(250,150) ctx.lineTo(250, 150); // 绘制到(150,150) ctx.lineTo(150, 150); // 闭合路径，自动连接回起点 ctx.closePath(); // 设置填充颜色 ctx.fillStyle = '#909399'; // 填充三角形 ctx.fill();
注意每次绘制新图形前最好调用beginPath()，避免之前的路径样式影响新图形的绘制效果，路径操作完成后需要调用fill()或stroke()才会真正渲染到画布上。
html5_canvas矩形绘制圆形绘制路径操作修改时间：2026-07-07 13:42:27