canvas浅析（一）

<canvas> 是 HTML5 提供的一个用于绘制图形的元素，它通过 JavaScript 操作来实现动态的 2D 或 3D 图形渲染。以下是 <canvas> 的各个部分详解及其使用方法。

---

1. <canvas> 元素

基本结构

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

• id：用于在 JavaScript 中获取 <canvas> 元素。
• width 和 height：定义画布的宽度和高度（单位为像素）。如果未设置，默认宽度为 300px，高度为 150px。

注意事项

• <canvas> 是一个双标签元素，内容会在浏览器不支持 <canvas> 时显示。
• 示例：

  <canvas id="myCanvas">您的浏览器不支持 canvas 元素。</canvas>
  

---

2. 获取绘图上下文

在 JavaScript 中，需要通过 <canvas> 元素获取绘图上下文（context），然后才能进行绘制操作。

2D 上下文

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取 2D 绘图上下文

3D 上下文（WebGL）

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl'); // 获取 WebGL 上下文

---

3. 绘制基本图形

(1) 矩形

• 绘制填充矩形：

  ctx.fillStyle = 'red'; // 设置填充颜色
  ctx.fillRect(10, 10, 100, 50); // (x, y, width, height)
  

• 绘制边框矩形：

  ctx.strokeStyle = 'blue'; // 设置边框颜色
  ctx.strokeRect(