Canvas 基础

Canvas 是 HTML5 中的一个新特性，它提供了一个绘图 API，可以让开发者使用 JavaScript 在页面上绘制图形、动画和游戏等。

以下是 Canvas 的基础知识：

1.创建 Canvas 元素

在 HTML 中，使用 标签创建一个画布元素，例如：

<canvas id="myCanvas"></canvas>

可以通过 JavaScript 获取该元素：

const canvas = document.getElementById('myCanvas');

2.获取 Canvas 上下文

在 JavaScript 中，需要通过获取 Canvas 上下文对象来绘制图形，可以使用 getContext() 方法获取 Canvas 上下文对象，例如：

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

3.绘制基本图形

使用 Canvas 绘制图形需要使用上下文对象的方法，例如绘制矩形的方法 rect()，绘制圆形的方法 arc()，绘制直线的方法 lineTo() 等。以下是绘制矩形和圆形的例子：

// 绘制矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 50, 50); // 绘制一个宽为50、高为50的红色矩形，起始坐标为(10, 10)

// 绘制圆形
ctx.beginPath(); // 开始新路径
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制半径为50的圆形，起始角度为0，结束角度为2 * Math.PI
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fill(); // 填充路径

4.绘制文本

Canvas 也支持在画布上绘制文本，可以使用 fillText() 方法或 strokeText() 方法绘制文本。以下是绘制文本的例子：

ctx.font = '24px Arial'; // 设置字体大小和类型
ctx.fillStyle = 'black'; // 设置填充颜色
ctx.fillText('Hello, World!', 10, 150); // 绘制文本，起始坐标为(10, 150)

5.动画绘制

使用 Canvas 可以绘制动画，通过不断重绘 Canvas 可以让图形动起来。可以使用 requestAnimationFrame() 方法来实现动画的循环绘制。以下是一个简单的动画绘制例子：

let x = 0; // 初始位置
function draw() {
  // 绘制圆形
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  // 更新位置
  x += 2;
  if (x > canvas.width) {
    x = 0;
  }
  // 循环绘制
  requestAnimationFrame(draw);
}
draw(); // 开始绘制

6.图像操作

使用 Canvas 可以对图像进行操作，包括加载图像、绘制图像、裁剪图像等。可以使用 drawImage() 方法将一个图像绘制在 Canvas 上。以下是绘制图像的例子：

const img = new Image();
img.onload = function() {
  // 图像加载完后执行
  ctx.drawImage(img, 0, 0); // 绘制图像，起始坐标为(0, 0)
};
img.src = 'image.png'; // 加载图像

7.后退和撤销操作

使用 Canvas 可以实现撤销和后退操作，可以使用 save() 方法保存当前状态，使用 restore() 方法恢复到之前保存的状态。以下是一个简单的后退和撤销操作例子：

const states = []; // 保存状态的数组
let currentState = 0; // 当前状态
function saveState() {
  // 保存当前状态
  states.push(canvas.toDataURL());
  currentState++;
}
function undo() {
  // 恢复到之前的状态
  if (currentState > 1) {
    currentState--;
    const img = new Image();
    img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
    };
    img.src = states[currentState - 1];
  }
}
function redo() {
  // 恢复到之后的状态
  if (currentState < states.length) {
    currentState++;
    const img = new Image();
    img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
    };
    img.src = states[currentState - 1];
  }
}

温馨提示：使用 Canvas 进行图像处理会占用较多的 CPU 和内存资源，需要注意性能问题。