Canvas API 是 HTML5 中的一个强大特性，它允许我们通过 JavaScript 在网页上绘制图形和动画。这篇博客将引导你学习如何使用 Canvas API 进行图形绘制，让你可以通过代码创造出独一无二的视觉效果。
什么是 Canvas API
Canvas API 是 HTML5 中的一个元素，它允许我们动态地在网页上创建位图图像。我们可以使用 JavaScript 存取和操作 Canvas API，通过设置像素值或者绘制图形来实现我们的绘图需求。
基本用法
要使用 Canvas API，我们需要先在 HTML 中创建一个 <canvas> 元素。下面是一个基本的例子：
<canvas id="myCanvas" width="500" height="500"></canvas>
上面的代码创建了一个宽度和高度为 500 像素的画布。我们还给它设定了一个唯一的 id，以便我们在 JavaScript 中引用它。
接下来，我们要在 JavaScript 中获取对这个画布的引用：
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
代码中，我们通过 getElementById 获取到了对 <canvas> 的引用，然后使用 getContext 方法获取了一个用于绘制 2D 图形的上下文对象。
在我们获得对上下文对象的引用之后，就可以使用它来绘制各种图形了。
绘制图形
矩形
要绘制一个矩形，我们可以使用上下文对象的 fillRect 或 strokeRect 方法。
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
上面的代码会在画布上绘制一个填充为红色的矩形，起点在 (50, 50)，宽度为 200 像素，高度为 100 像素。
如果你想要一个有边框的矩形，可以使用 strokeRect 方法：
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.strokeRect(50, 50, 200, 100);
这段代码会绘制一个边框为蓝色，宽度为 2 像素的矩形。
圆形
要绘制一个圆形，我们可以使用上下文对象的 arc 方法。
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fill();
上面的代码会在画布上绘制一个填充为绿色的圆形，圆心坐标为 (250, 250)，半径为 50 像素。
路径
路径是一个由点、线、曲线组成的集合，通过路径绘制图形可以实现更为复杂的效果。要使用路径，我们需要使用上下文对象的 beginPath 方法开始定义一个新路径，然后使用方法如 moveTo、lineTo、quadraticCurveTo 等来定义路径的起点、终点或曲线。
ctx.strokeStyle = 'purple';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.quadraticCurveTo(300, 100, 200, 200);
ctx.closePath();
ctx.stroke();
上面的代码会绘制一个起点为 (100, 200)，终点为 (400, 200)，有一段二次贝塞尔曲线的路径。这段路径闭合之后会得到一个梯形状。
总结
Canvas API 是一个非常强大和灵活的图形绘制工具。通过学习基础用法以及不同的绘制方法，我们可以创造出各种各样的独特图形和动画效果。希望这篇博客对你学习和掌握 Canvas API 有所帮助。
本文来自极简博客，作者：火焰舞者，转载请注明原文链接：学习使用Canvas API进行图形绘制
