在html开发中，我们可以通过Canvas元素配合对应的绘图函数实现各类基本图形元素的绘制，Canvas提供了丰富的绘图API，只要掌握核心的使用流程，就能快速完成常见图形的绘制。
一、Canvas绘图的基础准备
要使用html函数绘制Canvas图形，首先需要完成两个基础步骤：一是在html中定义Canvas元素，二是通过javascript函数获取Canvas的绘图上下文。Canvas元素本身只是一个容器，所有绘图操作都需要通过上下文对象来完成。
首先定义Canvas元素，需要注意的是，这里提到的html函数是指操作Canvas的javascript绘图函数，不是html标签本身：
<canvas id="drawCanvas" width="500" height="300"></canvas>
然后通过javascript函数获取2D绘图上下文，后续所有绘图操作都基于这个上下文对象：
// 获取Canvas元素
const canvas = document.getElementById('drawCanvas');
// 获取2D绘图上下文，这是绘制基本图形的核心对象
const ctx = canvas.getContext('2d');二、绘制矩形图形
矩形是最基础的图形元素，Canvas提供了三个专门的函数用于绘制矩形，分别是填充矩形、描边矩形和清除矩形区域。
fillRect(x, y, width, height)：绘制填充矩形，x和y是矩形左上角的坐标，width和height是矩形的宽高strokeRect(x, y, width, height)：绘制描边矩形，只绘制边框不填充内部clearRect(x, y, width, height)：清除指定矩形区域的绘图内容，相当于擦除操作
绘制矩形的示例代码如下：
// 设置填充颜色为蓝色 ctx.fillStyle = '#409eff'; // 绘制填充矩形，左上角坐标(20,20)，宽150，高100 ctx.fillRect(20, 20, 150, 100); // 设置描边颜色为红色，线宽为3 ctx.strokeStyle = '#f56c6c'; ctx.lineWidth = 3; // 绘制描边矩形，左上角坐标(200,20)，宽150，高100 ctx.strokeRect(200, 20, 150, 100); // 清除中间区域的内容 ctx.clearRect(100, 50, 50, 50);
三、绘制圆形和圆弧
Canvas中没有直接的圆形绘制函数，需要通过arc()函数结合路径操作来绘制圆形和圆弧。arc函数的基本参数是arc(x, y, radius, startAngle, endAngle, anticlockwise)，其中x和y是圆心坐标，radius是半径，startAngle和endAngle是起始和结束角度（单位是弧度），anticlockwise表示是否逆时针绘制，默认是顺时针。
绘制圆形的步骤如下：先调用beginPath()开始新路径，然后调用arc函数定义圆形路径，最后调用fill()或stroke()完成绘制。
// 开始新路径 ctx.beginPath(); // 绘制圆心(100,200)，半径40的圆形，0到2π弧度就是完整圆 ctx.arc(100, 200, 40, 0, Math.PI * 2); // 设置填充色为绿色，填充圆形 ctx.fillStyle = '#67c23a'; ctx.fill(); // 绘制描边圆弧，从0到π弧度，也就是半圆 ctx.beginPath(); ctx.arc(250, 200, 40, 0, Math.PI); ctx.strokeStyle = '#e6a23c'; ctx.lineWidth = 2; ctx.stroke();
四、绘制线条和路径图形
除了规则图形，我们还可以通过路径函数绘制自定义线条和多边形，核心函数包括moveTo(x,y)移动画笔到指定坐标，lineTo(x,y)从当前位置绘制线条到指定坐标，closePath()闭合路径。
下面是一个绘制三角形的示例：
// 开始新路径 ctx.beginPath(); // 移动画笔到三角形第一个顶点(400,150) ctx.moveTo(400, 150); // 绘制线条到第二个顶点(450,250) ctx.lineTo(450, 250); // 绘制线条到第三个顶点(350,250) ctx.lineTo(350, 250); // 闭合路径，自动连接最后一个点和第一个点 ctx.closePath(); // 填充三角形 ctx.fillStyle = '#909399'; ctx.fill(); // 绘制三角形边框 ctx.strokeStyle = '#303133'; ctx.lineWidth = 2; ctx.stroke();
五、绘图样式设置说明
在绘制图形时，我们可以通过上下文对象的属性设置各类样式，常用的样式属性如下：
| 属性名 | 作用说明 |
|---|---|
| fillStyle | 设置填充图形的颜色、渐变或图案 |
| strokeStyle | 设置描边线条的颜色、渐变或图案 |
| lineWidth | 设置描边线条的宽度，单位是像素 |
| lineCap | 设置线条端点的样式，可选值有butt、round、square |
| globalAlpha | 设置图形的全局透明度，取值范围0到1 |
只要掌握上述基础的html绘图函数使用方法，就可以组合出更多复杂的图形效果，后续还可以进一步学习渐变、图案、文本绘制等进阶内容，满足更多场景的绘图需求。