用 Canvas 实现画板 v1.0 的技巧

2024-02-02 23:23:23

绘画，作为一种广泛应用于艺术、设计和教育领域的创作形式，需要一个合适的工具或平台来实现。Canvas，作为 HTML5 的一部分，提供了一个灵活的画布，可以满足各种各样的绘画需求。本文将指导您利用 Canvas 和 JavaScript 来构建一个简易画板 v1.0，让您在数字世界中尽情揮灑创意。

一、开始动手

首先，我们先准备一个简单的 HTML 网页作为画板的载体。在这个网页中，我们需要创建一个 Canvas 元素，并设置其 ID，以便 JavaScript 能够操控它。例如：

<canvas id="myCanvas" width="600" height="400"></canvas>

在 JavaScript 部分，我们将使用 getContext() 方法获取 Canvas 的绘图上下文，以便进行各种绘图操作。绘图上下文提供了许多有用的方法，例如：

beginPath()： 开始一条新的路径。
moveTo()： 将路径移动到指定坐标。
lineTo()： 在路径上添加一条直线。
stroke()： 描边路径。
closePath()： 关闭路径。
fillStyle()： 设置填充颜色。
fillRect()： 用填充颜色填充矩形。

二、画笔与橡皮擦

接下来，我们需要为画板添加画笔和橡皮擦的功能。对于画笔，我们可以通过监听鼠标移动事件来实现。当鼠标移动时，我们记录鼠标的当前坐标，并在 Canvas 上绘制一条从上一个坐标到当前坐标的直线。例如：

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标当前坐标
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 如果鼠标按住左键
  if (e.buttons === 1) {
    // 开始一条新的路径
    ctx.beginPath();

    // 将路径移动到上一个坐标
    ctx.moveTo(lastX, lastY);

    // 添加一条直线到当前坐标
    ctx.lineTo(x, y);

    // 描边路径
    ctx.stroke();

    // 记录当前坐标
    lastX = x;
    lastY = y;
  }
});

橡皮擦的功能与画笔类似，但不同之处在于橡皮擦是擦除路径，而不是绘制路径。我们可以通过将画笔的颜色设置为白色，然后使用同样的鼠标移动事件监听器来实现橡皮擦。例如：

// 设置橡皮擦的颜色为白色
ctx.strokeStyle = 'white';

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标当前坐标
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 如果鼠标按住左键
  if (e.buttons === 1) {
    // 开始一条新的路径
    ctx.beginPath();

    // 将路径移动到上一个坐标
    ctx.moveTo(lastX, lastY);

    // 添加一条直线到当前坐标
    ctx.lineTo(x, y);

    // 描边路径
    ctx.stroke();

    // 记录当前坐标
    lastX = x;
    lastY = y;
  }
});

三、撤销与重做

为了让画板更加完善，我们还需要添加撤销和重做的功能。撤销功能可以将画板上的最后一步操作撤销，重做功能可以将撤销的操作重新执行。实现撤销和重做的关键在于保存每次操作的状态。我们可以使用一个数组来保存所有操作的状态，当用户点击撤销按钮时，我们可以从数组中删除最后一个状态，并重新绘制画板。当用户点击重做按钮时，我们可以从数组中取回最后一个状态，并重新绘制画板。例如：

// 保存所有操作的状态
var history = [];

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标当前坐标
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 如果鼠标按住左键
  if (e.buttons === 1) {
    // 开始一条新的路径
    ctx.beginPath();

    // 将路径移动到上一个坐标
    ctx.moveTo(lastX, lastY);

    // 添加一条直线到当前坐标
    ctx.lineTo(x, y);

    // 描边路径
    ctx.stroke();

    // 保存当前状态
    history.push(ctx.getImageData(0, 0, canvas.width, canvas.height));

    // 记录当前坐标
    lastX = x;
    lastY = y;
  }
});

// 监听撤销按钮的点击事件
document.getElementById('undoButton').addEventListener('click', function() {
  // 如果历史记录不为空
  if (history.length > 0) {
    // 从历史记录中删除最后一个状态
    history.pop();

    // 重新绘制画板
    ctx.putImageData(history[history.length - 1], 0, 0);
  }
});

// 监听重做按钮的点击事件
document.getElementById('redoButton').addEventListener('click', function() {
  // 如果历史记录不为空
  if (history.length > 0) {
    // 从历史记录中取回最后一个状态
    var lastState = history[history.length - 1];

    // 重新绘制画板
    ctx.putImageData(lastState, 0, 0);

    // 将最后一个状态添加到历史记录中
    history.push(lastState);
  }
});