答案：通过HTML5的canvas元素结合JavaScript可绘制图形。首先在HTML中创建canvas标签并设置宽高属性，然后用JavaScript获取2D绘图上下文ctx，接着使用fillRect、strokeRect绘制矩形，beginPath、moveTo、lineTo、closePath和fill/stroke绘制路径与形状，arc方法画圆，font、fillText/strokeText添加文字，最终实现基本图形与文本的绘制。
使用HTML5的canvas元素可以在网页上绘制图形，比如线条、形状、文字、图片等。它本身是一个空白区域，需要通过JavaScript来控制绘图操作。下面是一个简单明了的基础教程，带你快速上手Canvas绘图。
创建画布（Canvas）元素
在HTML中添加<canvas>标签，设置宽度和高度。注意：一定要用属性设置宽高，而不是CSS，否则可能导致图像变形。
<canvas id="myCanvas" width="400" height="300"> 您的浏览器不支持Canvas。 </canvas>
上面代码定义了一个400×300像素的画布，如果浏览器不支持Canvas，会显示提示文字。
获取绘图上下文
Canvas本身不能直接绘图，必须通过JavaScript获取“绘图上下文”对象。2D绘图使用getContext('2d')。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx就是你的绘图工具，所有绘图操作都通过它完成。
绘制基本图形
有了上下文后，就可以开始画图了。以下是几个常见的绘图操作：
1. 绘制矩形
-
ctx.fillRect(x, y, width, height)：绘制实心矩形 -
ctx.strokeRect(x, y, width, height)：绘制空心矩形边框 -
ctx.clearRect(x, y, width, height)：清除指定区域
ctx.fillStyle = 'blue'; // 填充颜色 ctx.fillRect(50, 50, 100, 80); // 在(50,50)处画一个100×80的蓝色矩形 <p>ctx.strokeStyle = 'red'; // 边框颜色 ctx.strokeRect(160, 50, 100, 80); // 红色边框矩形</p>
2. 绘制路径与线条
-
beginPath()：开始新路径 -
moveTo(x, y)：移动到某点（不画线） -
lineTo(x, y)：从当前点画线到指定点 -
stroke()：描边路径 -
fill()：填充路径
ctx.beginPath(); ctx.moveTo(200, 150); ctx.lineTo(250, 100); ctx.lineTo(300, 150); ctx.closePath(); // 连接回起点 ctx.fillStyle = 'green'; ctx.fill();
这段代码画了一个绿色三角形。
3. 绘制圆形
ctx.beginPath(); ctx.arc(100, 150, 50, 0, 2 * Math.PI); // 圆心(100,150)，半径50，画一圈 ctx.fillStyle = 'yellow'; ctx.fill(); ctx.strokeStyle = 'black'; ctx.lineWidth = 3; ctx.stroke();
绘制文字
Canvas也可以绘制文本：
-
ctx.font = '20px Arial'：设置字体 -
ctx.fillText("文本", x, y)：填充文字 -
ctx.strokeText("文本", x, y)：描边文字
ctx.font = '24px sans-serif';
ctx.fillStyle = 'purple';
ctx.fillText('Hello Canvas!', 10, 30);
基本上就这些。掌握这些基础操作后，你可以尝试动画、图像绘制、事件交互等更高级功能。Canvas适合做图表、小游戏、数据可视化等场景。关键是多练习，动手改参数看效果。
