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(10, 10, 100, 50); // (x, y, width, height)
  

(2) 路径

• 绘制直线：

  ctx.beginPath(); // 开始路径
  ctx.moveTo(10, 10); // 起点
  ctx.lineTo(100, 100); // 终点
  ctx.stroke(); // 绘制路径
  

• 绘制圆形：

  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2); // (x, y, radius, startAngle, endAngle)
  ctx.stroke();
  

(3) 文本

• 绘制填充文本：

  ctx.font = '20px Arial'; // 设置字体
  ctx.fillStyle = 'green'; // 设置颜色
  ctx.fillText('Hello, Canvas!', 10, 50); // (text, x, y)
  

• 绘制边框文本：

  ctx.font = '20px Arial';
  ctx.strokeStyle = 'black';
  ctx.strokeText('Hello, Canvas!', 10, 50);
  

---

4. 样式与颜色

(1) 填充颜色

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

(2) 边框颜色

ctx.strokeStyle = 'blue'; // 设置边框颜色
ctx.strokeRect(10, 10, 100, 50);

(3) 渐变

• 线性渐变：

  const gradient = ctx.createLinearGradient(0, 0, 200, 0);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  ctx.fillStyle = gradient;
  ctx.fillRect(10, 10, 200, 100);
  

• 径向渐变：

  const gradient = ctx.createRadialGradient(75, 75, 10, 75, 75, 50);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  ctx.fillStyle = gradient;
  ctx.fillRect(10, 10, 150, 150);
  

(4) 阴影

ctx.shadowColor = 'gray'; // 阴影颜色
ctx.shadowBlur = 10; // 阴影模糊度
ctx.shadowOffsetX = 5; // 阴影水平偏移
ctx.shadowOffsetY = 5; // 阴影垂直偏移
ctx.fillRect(10, 10, 100, 50);

---

5. 图像操作

(1) 绘制图像

const img = new Image();
img.src = 'image.png';
img.onload = () => {ctx.drawImage(img, 10, 10); // (image, x, y)
};

(2) 图像裁剪

ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
// (image, 源x, 源y, 源宽, 源高, 目标x, 目标y, 目标宽, 目标高)

---

6. 变换与状态管理

(1) 平移

ctx.translate(50, 50); // 移动坐标系
ctx.fillRect(0, 0, 100, 50);

(2) 旋转

ctx.rotate(Math.PI / 4); // 旋转 45 度
ctx.fillRect(50, 50, 100, 50);

(3) 缩放

ctx.scale(2, 2); // 放大 2 倍
ctx.fillRect(10, 10, 100, 50);

(4) 保存与恢复状态

ctx.save(); // 保存当前状态
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
ctx.restore(); // 恢复之前保存的状态
ctx.fillRect(150, 10, 100, 50);

---

7. 动画

通过 requestAnimationFrame 实现动画效果。

示例

let x = 0;function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布ctx.fillRect(x, 10, 100, 50);x += 1;requestAnimationFrame(draw); // 循环调用
}draw();

---

8. 事件处理

可以为 <canvas> 元素添加事件监听器，实现交互功能。

示例

canvas.addEventListener('click', (event) => {const x = event.offsetX;const y = event.offsetY;ctx.fillRect(x, y, 10, 10);
});