HTML5 提供了 <canvas> 元素，这是一个强大的绘图API，可以让你在网页上直接绘制各种图形和动画。无论是简单的线条、矩形还是复杂的路径和形状，都可以通过 <canvas> 元素轻松实现。下面，我们就来一起入门HTML5图形绘制，掌握基础线条、矩形、圆形等绘图代码。
1. <canvas> 元素介绍
在开始绘图之前，首先需要在HTML文档中添加一个 <canvas> 元素。这个元素是一个矩形画布，你可以通过JavaScript对其进行操作。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
在上面的代码中，我们创建了一个宽200像素、高100像素的画布，并为其添加了一个黑色的边框。
2. 获取画布上下文
在开始绘图之前，需要获取画布的上下文（Context）。这是通过调用 getElementById() 方法，并使用 getContext() 函数来实现的。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
在这里，"2d" 表示我们使用二维绘图上下文。
3. 绘制线条
线条是图形绘制中最基本的元素。下面是一个绘制线条的示例：
ctx.beginPath();
ctx.moveTo(10,10); // 开始绘制点
ctx.lineTo(150,150); // 结束绘制点
ctx.stroke(); // 完成绘制
在上面的代码中，我们首先使用 beginPath() 方法开始一个新的路径，然后使用 moveTo() 和 lineTo() 方法定义线条的起点和终点。最后，使用 stroke() 方法将线条绘制到画布上。
4. 绘制矩形
矩形绘制相对简单，使用 fillRect() 或 strokeRect() 方法即可。
// 绘制填充矩形
ctx.fillRect(0, 0, 100, 50);
// 绘制边框矩形
ctx.strokeRect(100, 0, 100, 50);
在这里，第一个参数和第二个参数分别表示矩形的左上角坐标，第三个和第四个参数表示矩形的宽度和高度。
5. 绘制圆形
绘制圆形需要使用 arc() 方法。下面是一个绘制圆形的示例：
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // 参数分别为：圆心x, 圆心y, 半径, 起始角度, 结束角度, 是否顺时针绘制
ctx.fill();
在这个例子中，我们绘制了一个半径为50像素的圆形，圆心位于坐标 (75, 75)。
6. 总结
通过以上几个简单的示例，相信你已经对HTML5图形绘制有了初步的了解。在实际应用中，你可以通过组合这些基础图形，创建出更多复杂的图形和动画。随着你对 <canvas> API 的熟悉，你的创作空间将更加广阔。