HTML5 Canvas 是一个强大的工具，允许你使用 JavaScript 在网页上绘制矢量图形。无论是简单的线条、矩形还是复杂的路径，Canvas 都可以轻松实现。下面，我将带你一步步入门 HTML5 Canvas 的矢量图形绘制。
1. Canvas 简介
Canvas 是 HTML5 中新增的一个元素，它提供了一个画布，你可以使用 JavaScript 在这个画布上绘制图形。Canvas 元素本身没有绘制的能力，所有的绘图操作都必须使用 JavaScript。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
2. 获取 Canvas 对象
首先，我们需要获取 Canvas 元素，并创建一个 2D 轴线（2D context），这是进行绘图操作的前提。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
3. 绘制线条
使用 lineTo() 方法可以绘制线条。首先，我们需要调用 moveTo() 方法设置线条的起始点，然后调用 lineTo() 方法设置线条的结束点。
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.stroke();
4. 绘制矩形
使用 rect() 方法可以绘制矩形。这个方法需要四个参数：矩形的 x、y 坐标和宽度和高度。
ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke();
5. 绘制圆形
使用 arc() 方法可以绘制圆形。这个方法需要五个参数：圆的圆心 x、y 坐标，半径，以及圆弧的起始和结束角度（以弧度为单位）。
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
6. 绘制路径
使用 beginPath()、moveTo()、lineTo() 等方法可以绘制复杂的路径。路径是由一系列线段和曲线组成的。
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
7. 设置样式
在绘制图形之前，我们可以设置线条的宽度、颜色、样式等样式。
ctx.lineWidth = 5;
ctx.strokeStyle = "#ff0000";
ctx.fillStyle = "#00ff00";
8. 绘制文字
使用 fillText() 或 strokeText() 方法可以绘制文字。这两个方法都可以设置文字的颜色和字体。
ctx.font = "30px Arial";
ctx.fillText("Hello, World!", 10, 50);
总结
通过以上教程，相信你已经对 HTML5 Canvas 的矢量图形绘制有了初步的了解。在实际应用中，你可以根据自己的需求，组合使用各种绘图方法，绘制出各种各样的图形。希望这篇文章能帮助你轻松入门 HTML5 Canvas 的矢量图形绘制！