JavaScript 画布：探索 HTML5 画布的奇妙世界
。
HTML5 画布是一个矩形区域，可以在其中使用 JavaScript 绘制图形、图像和动画。它是一个基于像素的画布，通过在画布上绘制像素进行渲染。在本文中，我们将深入探讨 HTML5 画布的基础知识、常用功能和一些创意示例。
准备工作
在开始使用 HTML5 画布之前，我们首先需要在 HTML 文件中创建一个画布元素。
<canvas id="myCanvas"></canvas>
在 JavaScript 中，我们可以使用 document.getElementById 方法获取这个画布元素，并获得一个绘图环境(context)对象，以便后续进行绘图操作。
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
现在，我们已经准备好开始绘制图形了。
绘制基本形状
HTML5 画布提供了一些基本的绘图方法，例如绘制矩形、圆形和直线等。让我们来看一些常用的绘图示例。
绘制矩形
我们可以使用 fillRect 方法绘制一个填充的矩形，使用 strokeRect 方法绘制一个带边框的矩形。
// 绘制填充的矩形
context.fillRect(x, y, width, height);
// 绘制带边框的矩形
context.strokeRect(x, y, width, height);
绘制圆形
要绘制圆形，我们可以使用 arc 方法，并指定圆心坐标、半径和起始角度/终止角度。
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterclockwise);
context.closePath();
context.fill(); // 填充圆形
context.stroke(); // 绘制圆形边框
绘制直线
要绘制直线，我们可以使用 moveTo 方法指定起始点的坐标，然后使用 lineTo 方法指定结束点的坐标。
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke(); // 绘制直线
渐变和阴影效果
HTML5 画布还提供了创建渐变和阴影效果的方法，可以让我们的图形更加生动和逼真。
渐变效果
我们可以使用 createLinearGradient 方法创建线性渐变对象，并使用 addColorStop 方法添加渐变颜色。
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(offset, color);
然后，我们可以使用 fillStyle 属性将渐变对象应用到图形上。
context.fillStyle = gradient;
阴影效果
要为图形添加阴影效果，我们可以使用 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor 属性。
context.shadowOffsetX = offsetX;
context.shadowOffsetY = offsetY;
context.shadowBlur = blur;
context.shadowColor = color;
动画和交互
除了静态的图形绘制，HTML5 画布还支持动画和交互。我们可以通过定时器和事件监听器来实现这些效果。
动画
要创建动画，我们可以使用 requestAnimationFrame 方法，该方法会在每一帧重绘画布。
function draw() {
// 执行绘制操作
requestAnimationFrame(draw);
}
draw(); // 启动动画
交互
要为画布添加交互功能，我们可以使用事件监听器，例如点击、
