HTML中的 `＜canvas＞` 元素

<canvas> 是一种在网页上绘制图形的 HTML5 元素。它为开发者提供了一块空白画布，可以用来绘制动态图像或复杂的图形。本文将详细介绍 <canvas> 的基本概念、作用以及如何使用 JavaScript 来控制 <canvas> 元素。此外，我们还将通过多个示例演示如何使用 <canvas> 进行绘图，并探讨一些实际开发中的技巧。

基本概念和作用

<canvas> 是一个矩形区域，可以用 JavaScript 来绘制路径、盒子、圆、字符以及添加图像。它不像 SVG 那样直接在文档中定义形状，而是提供了一个 API 来动态地绘制图形。

<canvas> 的基本结构

<canvas id="myCanvas" width="500" height="500"></canvas>

上面的代码定义了一个宽高均为 500 像素的 <canvas> 元素。id 属性用于后续获取该元素的引用。

获取 <canvas> 上下文

在使用 <canvas> 之前，我们需要先获取它的上下文（context）。上下文提供了用于绘制图形的方法和属性。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

这里，getContext('2d') 返回了一个 2D 渲染上下文及其方法。

示例一：绘制一个简单的矩形

让我们从最基础的开始，绘制一个红色的矩形。

// 绘制一个红色的矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 100); // (x, y, width, height)

示例二：绘制一条直线

接下来，我们来绘制一条直线。

// 绘制一条直线
ctx.beginPath(); // 开始新的路径
ctx.moveTo(10, 150); // 移动到起点
ctx.lineTo(150, 150); // 画直线到终点
ctx.strokeStyle =