在网页开发中，我们经常需要在页面上绘制不同的图形，比如矩形、圆形、线条等。Canvas API 是HTML5中一个非常强大的功能，可以用来动态地绘制图形和图像。本文将介绍如何使用Canvas API进行图形绘制。
1. 创建一个Canvas元素
要使用Canvas API进行图形绘制，首先需要在HTML文档中创建一个Canvas元素，这可以通过在HTML中插入<canvas>标签来实现。例如：
<canvas id="myCanvas"></canvas>
我们在这个Canvas元素上进行图形绘制操作。
2. 获取绘图上下文
要开始绘制图形，我们需要获取到Canvas的绘图上下文（context）。在JavaScript中，可以通过调用getContext()方法来获取上下文对象。常用的上下文类型有"2d"和"webgl"，我们使用"2d"类型进行图形绘制。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
现在，我们已经成功获取到了绘图上下文对象ctx，可以开始进行绘制操作了。
3. 绘制形状
Canvas API提供了一系列的方法，用于绘制各种形状，比如矩形、圆形、线条等。
3.1 绘制矩形
绘制矩形可以使用fillRect()和strokeRect()方法。fillRect()方法用于填充矩形，strokeRect()方法用于绘制矩形边框。
// 填充矩形
ctx.fillRect(x, y, width, height);
// 绘制矩形边框
ctx.strokeRect(x, y, width, height);
3.2 绘制圆形
绘制圆形可以使用arc()方法。需要指定圆心坐标、半径和起始角度、结束角度。
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill(); // 填充圆形
// 或者
ctx.stroke(); // 绘制圆形边框
3.3 绘制线条
绘制线条可以使用moveTo()和lineTo()方法。首先使用moveTo()方法设置起点，然后使用lineTo()方法设置终点。
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke(); // 绘制线条
4. 绘制样式
Canvas API还提供了一些设置绘制样式的方法，可以设置填充颜色、边框颜色、线条宽度等。
4.1 设置填充颜色
可以通过调用fillStyle属性设置填充颜色。
ctx.fillStyle = "red";
4.2 设置边框颜色
可以通过调用strokeStyle属性设置边框颜色。
ctx.strokeStyle = "blue";
4.3 设置线条宽度
可以通过调用lineWidth属性设置线条宽度。
ctx.lineWidth = 2;
5. 实例演示
下面是一个使用Canvas API进行图形绘制的示例：
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制一个矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
// 绘制一个圆形
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
// 绘制一条线
ctx.beginPath();
ctx.moveTo(300, 300);
ctx.lineTo(400, 400);
ctx.strokeStyle = "green";
ctx.lineWidth = 2;
ctx.stroke();
</script>
通过Canvas API，我们可以自由绘制各种形状，并设置样式来实现丰富多样的图形效果。
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
本文来自极简博客，作者：雨后彩虹，转载请注明原文链接：使用Canvas API进行图形绘制（Canvas API）
