使用canvas实现动态画板与手写板

本文还有配套的精品资源，点击获取

简介：本教程详细指导如何使用HTML5的canvas元素创建一个具有手写输入功能的画板应用。介绍了HTML5 Canvas的基础知识，如何在HTML中创建canvas元素并用JavaScript操纵它来绘制2D图形。涵盖了画笔设置、监听鼠标事件、画笔颜色和线条宽度的改变，以及如何保存和加载画作。此外，还提供了性能优化的方法，并概述了如何通过添加更多交互功能来扩展画板应用。

1. HTML5 Canvas基础介绍

什么是HTML5 Canvas

HTML5 Canvas是一种通过JavaScript在网页上绘制图形的方法。它提供了一块画布 <canvas> 元素，可以在此基础上绘制图形、图片、文本以及各种视觉效果。作为Web应用中一种强大的图形绘制技术，Canvas不仅支持2D绘图，还可以通过WebGL技术进行3D绘图。

HTML5 Canvas的核心特点

Canvas的主要特点包括：
- 动态 ：可以在运行时根据用户交互动态地绘制和修改图形。
- 脚本化 ：图形绘制完全由JavaScript控制，使得创建动画和交互式图形应用变得简单。
- 灵活 ：支持像素级操作，可以进行图像处理，比如过滤效果和图像合成等。

Canvas与其他Web图形技术的比较

与早期的SVG（Scalable Vector Graphics）相比，Canvas更擅长于复杂的图形操作和动画处理，但SVG在矢量图形和交互式编辑方面表现更佳。与Flash相比，Canvas的优势在于完全依赖HTML和JavaScript，与Web技术集成更好。

Canvas技术的这些特点使其成为了开发复杂图形界面的理想选择，尤其在游戏开发、数据可视化、动态广告等领域有着广泛的应用。随着HTML5的普及，Canvas技术正变得越来越重要。接下来的章节将会深入探讨如何使用Canvas绘制基本图形、如何处理用户交互，以及如何进行性能优化等高级话题。

2. 创建canvas元素与获取

2.1 canvas元素在HTML中的应用

2.1.1 canvas元素的基本结构和属性

HTML5 的 <canvas> 元素是一个可以使用脚本（通常是 JavaScript）来绘制图形的 HTML 元素。它最初由苹果公司为了在MAC OS X上构建一个名为 Webkit 的图形框架而引入。后来，HTML5 规范采用并扩展了这一元素。

<canvas> 元素由以下属性组成：

• width : 设置画布的宽度。
• height : 设置画布的高度。
• style : 用于设置画布的样式，比如边框、背景色等。

基本结构示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>

在上面的示例中，我们创建了一个 id 为 myCanvas 的 <canvas> 元素，宽度为200像素，高度为100像素。可以使用CSS来为 <canvas> 设置样式，例如：

#myCanvas {
  border: 1px solid black;
}

2.1.2 如何在页面中创建和初始化canvas元素

要在页面中创建并初始化 <canvas> 元素，你需要使用 JavaScript 来获取 DOM 中的 <canvas> 元素，并创建一个渲染上下文。以下是创建和初始化 <canvas> 的基本步骤：

1. 通过 <canvas> 元素的 id 属性，使用 document.getElementById 获取 DOM 元素。
2. 使用 .getContext('2d') 方法获取 2D 渲染上下文。
3. 使用获取到的上下文对象来绘制图形。

初始化 canvas 的示例代码：

// 获取canvas元素
var canvas = document.getElementById('myCanvas');

// 检查canvas元素是否存在
if (canvas.getContext) {
  // 获取2D渲染上下文
  var ctx = canvas.getContext('2d');

  // 使用2D上下文进行绘图操作
  ctx.fillStyle = "#FF0000"; // 设置填充色为红色
  ctx.fillRect(0, 0, 100, 100); // 绘制红色填充的正方形
} else {
  console.log('浏览器不支持canvas');
}

在上面的代码中，首先通过 document.getElementById 获取了 id 为 myCanvas 的 <canvas> 元素。之后，检查了该元素是否支持 getContext 方法，如果支持，则获取了 2D 渲染上下文，并使用该上下文绘制了一个红色填充的正方形。

2.2 获取canvas元素及其上下文

2.2.1 使用JavaScript获取canvas DOM元素

要使用 JavaScript 获取 <canvas> 元素，可以使用多种方法。最直接的方法是使用 document.getElementById 方法，它是 DOM API 中用于获取具有指定 id 的元素的标准方法。如果你有多个 <canvas> 元素，并且想要根据其他属性获取它们，可以使用其他方法，如 document.querySelector 或 document.querySelectorAll 。

通过ID获取 <canvas> 元素的代码示例：

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

通过类名获取 <canvas> 元素的代码示例：

var canvases = document.querySelectorAll('.myCanvasClass');

2.2.2 获取2D渲染上下文的API介绍与使用

获取 <canvas> 元素之后，下一步是获取渲染上下文。在HTML5中， <canvas> 元素有一个 getContext() 方法，该方法用于获取绘图的上下文（ context ）。对于二维图形， getContext() 方法被用来获取 2d 对象，它包含了用于绘制的属性和方法。

获取2D渲染上下文的代码示例：

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

在获取了2D渲染上下文后，你就可以使用 ctx 对象来绘制各种二维图形，例如线条、矩形、圆形、文本，以及使用图像等。

表格： getContext() 方法参数

参数	描述
'2d'	获取二维渲染上下文。这是最常见的参数，用于绘制平面图形。
'webgl'	获取 WebGL 渲染上下文，用于绘制3D图形。不是所有浏览器都支持。
'experimental-webgl'	同 'webgl' ，但在某些浏览器中作为试验性功能提供。
CanvasRenderingContext2D	一个接口，它定义了用于在 HTML <canvas> 元素上绘图的2D渲染上下文的方法和属性。
WebGLRenderingContext	一个接口，它提供了用于在一个 <canvas> 元素上绘制高级3D图形的方法和属性。

使用 getContext() 方法时，通常你会传递 '2d' 作为参数来获取2D渲染上下文，该上下文是用于绘制二维图形的 CanvasRenderingContext2D 接口的一个实例。

代码块：绘制简单图形

// 获取canvas元素
var canvas = document.getElementById('myCanvas');

// 获取2D渲染上下文
var ctx = canvas.getContext('2d');

// 设置填充颜色
ctx.fillStyle = '#f00';

// 绘制矩形
ctx.fillRect(10, 10, 100, 100);

// 设置描边颜色
ctx.strokeStyle = '#00f';

// 绘制边框
ctx.strokeRect(10, 10, 100, 100);

在上面的代码块中，我们首先获取了 <canvas> 元素及其2D渲染上下文。然后设置填充颜色为红色，并绘制了一个100x100像素的矩形。接着我们设置了描边颜色为蓝色，并绘制了该矩形的边框。

这一系列操作说明了如何通过 JavaScript 获取 <canvas> 元素和它的2D渲染上下文，并使用这些工具绘制基本的图形。这些基础操作是构建更复杂绘图功能的基石，对于任何想要深入学习 <canvas> 元素的开发者来说，这些知识是必不可少的。

3. JavaScript中2D渲染上下文的创建

3.1 2D渲染上下文的绘图基础

3.1.1 常用绘图API介绍

在Web浏览器中，Canvas API提供了一组丰富的绘图接口，这些接口通过JavaScript暴露给开发者，使得我们可以自由地在canvas元素上绘制各种图形。我们从最基本的操作说起，比如绘制直线、矩形、圆形等等。

• fillRect(x, y, width, height) ：绘制一个填充的矩形。参数 x 和 y 指定了矩形左上角的坐标， width 和 height 指定了矩形的宽和高。
• strokeRect(x, y, width, height) ：绘制一个矩形边框。参数与 fillRect 类似，但此函数只绘制矩形边框，不填充矩形。
• clearRect(x, y, width, height) ：清除指定的矩形区域，使其变透明。
• arc(x, y, radius, startAngle, endAngle) ：绘制一个圆形弧线。 x 和 y 是圆弧中心的坐标， radius 是圆弧半径， startAngle 和 endAngle 则是起始和结束角度，角度单位为弧度。

这些API是Canvas绘图的基础，能让我们快速地在画布上构建基本图形。以下是一个简单的示例代码：

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

// 绘制一个红色的填充矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 绘制一个黑色的矩形边框
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.strokeRect(50, 50, 100, 100);

// 绘制一个圆形弧线
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2, true); // 参数分别为：圆心x坐标，圆心y坐标，半径，起始角度，结束角度，顺时针绘制
ctx.closePath();
ctx.stroke(); // 仅绘制边框

3.1.2 坐标系统和路径绘制

Canvas使用的是一个以屏幕左上角为原点(0,0)的坐标系统。在默认情况下，一个像素对应画布上的一个单位长度，因此画布的像素精度决定了图形的精细程度。

路径绘制是Canvas绘图的一个重要组成部分。路径是由一系列的子路径构成的，子路径可以是直线、弧线、贝塞尔曲线等。所有的绘图操作都是在当前路径的基础上进行的。要开始绘制路径，我们通常会使用 beginPath() 方法开始一个新的路径，然后使用 moveTo(x, y) 将画笔移动到指定坐标（相当于提起笔移动到另一点，不绘制线条）。绘制路径后，使用 closePath() 可以闭合路径，即自动将当前点与路径的起始点相连。

// 绘制一个三角形路径
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 100);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill(); // 使用fill()填充三角形

在路径绘制完成后，我们可以对路径进行填充（ fill() ）、描边（ stroke() ）或添加阴影（ shadowBlur 、 shadowColor 、 shadowOffsetX 、 shadowOffsetY ）。路径的组合和控制为绘制复杂图形提供了无限的可能。

3.2 2D图形绘制与变换

3.2.1 绘制基本图形（线条、矩形、圆形等）

Canvas的2D绘图上下文为我们提供了绘制各种基本图形的方法。前面我们已经提到了矩形和圆形的绘制，接下来我们讨论如何绘制线条和其他图形。

• lineTo(x, y) ：将画笔从当前位置移动到指定的 x 、 y 坐标，如果画笔当前位置与新的位置之间存在路径，则会绘制一条线段。
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ：绘制一条贝塞尔曲线。 cp1x 、 cp1y 为第一个控制点坐标， cp2x 、 cp2y 为第二个控制点坐标， x 和 y 为结束点坐标。
• quadraticCurveTo(cpx, cpy, x, y) ：绘制一条二次贝塞尔曲线。 cpx 和 cpy 为控制点坐标， x 和 y 为结束点坐标。

以下是一个示例，绘制了几种基本图形：

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

// 绘制线条
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(200, 30);
ctx.stroke();

// 绘制贝塞尔曲线
ctx.beginPath();
ctx.moveTo(30, 150);
ctx.bezierCurveTo(30, 50, 150, 150, 150, 50);
ctx.stroke();

// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(30, 270);
ctx.quadraticCurveTo(150, 100, 150, 270);
ctx.stroke();

3.2.2 矩阵变换和合成操作

Canvas中的图形绘制可以通过矩阵变换来实现旋转、缩放和倾斜等效果。Canvas API提供了多个用于变换的方法：

• rotate(angle) ：旋转当前绘图路径。 angle 是旋转的弧度值。
• scale(x, y) ：缩放当前绘图路径。 x 和 y 分别是水平和垂直方向的缩放因子，1表示不缩放。
• translate(x, y) ：移动当前绘图路径的原点。 x 和 y 是新的原点相对于原原点的偏移量。

合成操作则用于处理多个图形绘制时的重叠部分。Canvas提供了几个合成操作模式：

• globalCompositeOperation ：属性设置或获取当前的合成操作。例如 'source-over' 是默认值，新图形覆盖在旧图形上； 'destination-out' 则会使新图形覆盖的部分变透明。

下面是一个例子，展示了如何使用变换和合成操作：

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

// 绘制一个矩形并缩放
ctx.fillRect(50, 50, 100, 100);
ctx.scale(2, 2);
ctx.fillRect(50, 50, 100, 100); // 注意这里缩放后绘制的矩形实际上会更大

// 将新矩形的绘制设置为剪切模式，从而使它只在第一个矩形的范围内绘制
ctx.globalCompositeOperation = 'destination-in';
ctx.fillRect(50, 50, 100, 100);

在进行复杂绘图时，这些变换和合成技术能够帮助我们实现丰富的视觉效果。而了解这些基础概念，是构建出复杂交互式图形应用的关键。在后续章节中，我们将深入探讨如何将这些技术用于实际项目中，例如构建一个手写板或者一个绘图应用。

4. 鼠标事件监听与画笔控制

在本章节中，我们将探讨如何通过监听鼠标事件来控制画布上的画笔，这将允许用户与画布进行交互。我们将从基础的鼠标事件类型和监听方法开始，然后深入了解如何将鼠标事件转换为画笔动作，并实现响应式绘制和不同绘制状态的区分。

4.1 鼠标事件的基础和应用

鼠标事件是用户与画布交互的主要方式，它们为我们的画笔提供动力。在本小节中，我们将介绍常见的鼠标事件类型，以及如何在JavaScript中监听这些事件，从而实现精细的控制。

4.1.1 鼠标事件类型和监听方法

在Web开发中，与鼠标相关的事件类型包括但不限于： mousedown 、 mousemove 、 mouseup 、 click 、 mouseover 、 mouseout 等。这些事件在HTML5 Canvas中提供了丰富的交互可能性。

对于这些事件的监听，我们可以使用 addEventListener 方法添加事件处理函数。例如：

// 获取canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 添加鼠标事件监听器
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);

// 画笔按下
function handleMouseDown(event) {
  // event.offsetX 和 event.offsetY 提供了鼠标相对于画布的位置信息
  // ...
}

// 画笔移动
function handleMouseMove(event) {
  // ...
}

// 画笔释放
function handleMouseUp(event) {
  // ...
}

4.1.2 如何将鼠标事件转换为画笔动作

将鼠标事件转换为画笔动作，需要结合Canvas的绘图API进行。例如，当检测到 mousedown 事件时，我们可以开始绘制路径，而 mousemove 事件则用于路径的更新。当检测到 mouseup 事件时，我们可以停止绘制路径并显示最终结果。

let painting = false; // 控制是否正在绘制

function handleMouseDown(event) {
  painting = true;
  ctx.beginPath();
  ctx.moveTo(event.offsetX, event.offsetY);
}

function handleMouseMove(event) {
  if (painting) {
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
  }
}

function handleMouseUp(event) {
  if (painting) {
    ctx.stroke();
    painting = false;
  }
}

通过这样的逻辑，我们能够实现一个基础的画笔控制功能，允许用户在Canvas上自由绘制。

4.2 画笔的动态控制

实现画笔动态控制不仅可以提升用户体验，还能为我们的应用增加更多的交互元素。在这一小节中，我们将讨论如何实现画笔响应式的绘制效果，以及如何区分不同的绘制状态。

4.2.1 实现画笔的响应式绘制

响应式绘制是指根据用户的行为（如鼠标速度）动态调整绘制效果。例如，我们可以根据鼠标移动的速度来改变线条的粗细，或者根据按压力度来改变线条的颜色深浅。

let lastX = 0;
let lastY = 0;

function handleMouseMove(event) {
  if (painting) {
    const x = event.offsetX;
    const y = event.offsetY;
    const speed = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));
    ctx.lineWidth = speed / 2; // 线条粗细随速度变化
    ctx.lineTo(x, y);
    ctx.stroke();
    lastX = x;
    lastY = y;
  }
}

4.2.2 实现不同绘制状态（按压、移动、释放）的区分

为了进一步区分用户的绘制状态，我们可以在鼠标按下时改变画笔颜色，移动时绘制线条，而在鼠标释放时停止绘制。这可以通过状态标志位来控制。

let isDrawing = false;
let currentColor = 'black';

canvas.addEventListener('mousedown', function(event) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(event.offsetX, event.offsetY);
  ctx.strokeStyle = currentColor;
});

canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
  }
});

canvas.addEventListener('mouseup', function(event) {
  if (isDrawing) {
    ctx.stroke();
    isDrawing = false;
  }
});

// 按钮示例，用于改变当前绘制颜色
document.getElementById('blackButton').addEventListener('click', function() {
  currentColor = 'black';
});

document.getElementById('redButton').addEventListener('click', function() {
  currentColor = 'red';
});

通过上述代码，我们不仅实现了画笔的基本绘制逻辑，还增加了用户交互的灵活性。本章节的内容，为实现更复杂的画布应用打下了坚实的基础。随着项目的深入，我们将继续在接下来的章节中探讨更多高级功能和优化策略。

5. 画笔属性设置（颜色、线条宽度等）

5.1 画笔颜色和样式的控制

5.1.1 如何设置画笔的颜色和填充样式

在使用Canvas进行绘图时，设定画笔的颜色和填充样式是实现艺术效果的基本步骤。我们可以通过 getContext('2d') 获得的Canvas上下文对象来设置这些属性。 fillStyle 属性用于设置填充颜色，它接受CSS样式中的颜色值，包括十六进制、RGB、RGBA以及预定义的颜色名称。

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

// 使用十六进制颜色设置画笔
ctx.fillStyle = '#FF0000'; // 红色

// 使用RGB颜色设置画笔
ctx.fillStyle = 'rgb(255, 0, 0)'; // 红色

// 使用RGBA颜色设置画笔，并具有透明度
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色

在上述代码中，我们演示了如何使用不同的颜色格式设置 fillStyle 属性，从而改变Canvas中画笔的填充样式。值得注意的是，当使用 rgba 格式时，最后一个参数指的是透明度，取值范围为0（完全透明）到1（完全不透明）。

5.1.2 线条样式和宽度的调整

除了填充样式，Canvas还提供了调整线条样式的功能。 strokeStyle 属性用于定义线条的颜色，类似于 fillStyle 。而 lineWidth 属性则用于设定线条的宽度，这个属性允许我们绘制不同粗细的线条，使得绘制的图形更加精细。

// 设置线条颜色为蓝色，宽度为3px
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;

// 绘制一条线段
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.stroke(); // 实际画出线条

上述代码展示了如何通过修改 strokeStyle 和 lineWidth 属性来改变画笔的线条样式和宽度。在 beginPath() 和 stroke() 方法之间，你可以使用一系列绘图命令来构建路径，随后通过 stroke() 方法来绘制路径线条。

5.2 高级画笔属性的应用

5.2.1 图案和渐变的实现

Canvas还支持创建复杂的图案和渐变效果，这些可以极大地丰富画作的视觉层次。图案通常通过 createPattern 方法创建，而渐变则通过 createLinearGradient 或 createRadialGradient 方法创建。

// 创建一个图案
const patternImage = document.getElementById('myPatternImage');
const pattern = ctx.createPattern(patternImage, 'repeat');

// 应用图案
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 创建一个线性渐变
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');

// 应用渐变作为填充样式
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

在上述代码中，我们展示了如何创建一个图案和线性渐变。首先，通过 createPattern 创建一个图案，它接受一个图片元素和一个平铺模式（如’repeat’表示重复）。接着， createLinearGradient 创建了一个线性渐变，并通过 addColorStop 方法定义了渐变的不同颜色停靠点。

5.2.2 画笔阴影和透明度的设置

阴影效果可以使画布上的图形看起来更有立体感。通过 shadowColor 、 shadowOffsetX 、 shadowOffsetY 、 shadowBlur 等属性，我们可以为画笔添加阴影效果。

// 设置阴影效果
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色和透明度
ctx.shadowOffsetX = 10; // 阴影在X轴的偏移
ctx.shadowOffsetY = 10; // 阴影在Y轴的偏移
ctx.shadowBlur = 5; // 阴影模糊半径

// 使用阴影绘制图形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 150);

在上述代码中，我们通过设置阴影的属性来给图形添加了阴影效果。阴影的透明度、偏移和模糊程度可以通过这些属性来控制，从而达到不同的视觉效果。

以上章节内容涵盖了如何在Canvas中设置画笔的颜色、填充样式、线条样式、宽度以及如何实现图案、渐变和阴影效果。这些内容为艺术家和开发者提供了工具和技巧，以创建更加丰富和动态的画布应用。接下来，我们将进一步探索如何通过交互功能，例如改变颜色、擦除和撤销等，来增强Canvas应用程序的用户体验。

6. 交互功能的添加（改变颜色、擦除等）

在现代web应用中，能够与用户进行交云的界面是极其重要的。在HTML5 Canvas中，我们可以通过添加交互功能来提升用户体验。本章我们将探讨如何在画板应用中添加改变颜色、擦除等交互功能。

6.1 实现画板的基本交互

画板应用的交互功能首先体现在用户与画布的互动上。一个画板应用至少应该具备的基本功能包括选择画笔颜色和调整画布大小。

6.1.1 提供颜色选择器的实现

颜色选择器通常是一个弹出式的界面组件，允许用户从一个颜色库中选择颜色，或者通过输入颜色代码来选择自定义颜色。我们可以使用HTML和JavaScript来实现这样一个功能。

<!-- 简单的颜色选择器 -->
<input type="color" id="colorPicker" />

// JavaScript代码用于绑定颜色选择器事件
document.getElementById('colorPicker').addEventListener('change', function(e) {
  const selectedColor = e.target.value;
  // 在画板应用中使用选中的颜色
  drawingContext.fillStyle = selectedColor;
  drawingContext.strokeStyle = selectedColor;
});

通过上述简单的HTML和JavaScript代码，我们可以实现一个基本的颜色选择器，并将用户选中的颜色应用到Canvas上。

6.1.2 实现画布的放大缩小功能

随着用户可能想要更仔细地查看他们的作品或是需要更大的空间进行创作，画布的放大缩小功能便显得尤为重要。此功能可以通过监听用户的缩放手势或是工具栏上的按钮来实现。

// JavaScript代码实现画布的放大缩小
const canvas = document.querySelector('canvas');
const scale = 1.1; // 缩放比例
let scaleMode = false;

canvas.addEventListener('wheel', function(event) {
  if (!scaleMode) {
    return;
  }
  event.preventDefault();
  let newWidth = canvas.width * scale;
  let newHeight = canvas.height * scale;
  canvas.width = newWidth;
  canvas.height = newHeight;
  // 重新绘制画布内容
  redrawCanvas();
});

function redrawCanvas() {
  // 此函数负责根据新的画布尺寸重绘画布
  // 重新获取画布上下文
  const ctx = canvas.getContext('2d');
  // 根据新的尺寸重新绘制画布内容
  // ...
}

在上面的代码段中，我们监听了Canvas元素的wheel事件来实现缩放功能。 redrawCanvas 函数需要根据具体应用实现画布内容的重绘。

6.2 擦除与撤销功能

擦除和撤销功能是画板应用中常用的编辑工具。用户可以通过这些工具来纠正错误或是撤销之前的绘画步骤。

6.2.1 擦除工具的实现方法

擦除工具可以看作是一种特殊的画笔，但它的绘制结果是将画布对应区域的颜色恢复为默认值或透明。擦除工具的实现需要监听用户的鼠标移动事件，并将所经过的区域颜色清空。

// JavaScript代码实现擦除工具
let isErasing = false;

canvas.addEventListener('mousedown', function(event) {
  isErasing = true;
});

canvas.addEventListener('mouseup', function(event) {
  isErasing = false;
});

canvas.addEventListener('mousemove', function(event) {
  if (isErasing) {
    const x = event.offsetX;
    const y = event.offsetY;
    // 清除特定区域的颜色
    drawingContext.clearRect(x, y, 5, 5);
  }
});

上述代码展示了如何在用户按下鼠标时开始擦除，并在释放鼠标时结束擦除。擦除工具在鼠标移动时将移动轨迹上的一小块区域颜色清空。

6.2.2 撤销操作的逻辑实现

撤销操作允许用户回到之前的绘画状态。这通常需要使用一个堆栈来存储每次绘画的状态，以便能够恢复到任意之前的步骤。

// 一个简单的撤销栈
const undoStack = [];

// 每次绘制后，将当前画布状态推入栈中
function addToUndoStack() {
  const imageData = drawingContext.getImageData(0, 0, canvas.width, canvas.height);
  undoStack.push(imageData);
}

// 实现撤销功能
function undo() {
  if (undoStack.length === 0) {
    return;
  }
  // 弹出当前画布状态
  const imageData = undoStack.pop();
  // 恢复到上一次的状态
  drawingContext.putImageData(imageData, 0, 0);
}

// 绘制完成后调用addToUndoStack函数
// drawingContext.stroke();
// addToUndoStack();

// 调用undo函数实现撤销
// undo();

通过使用 getImageData 和 putImageData 方法，我们能够保存和恢复画布的状态，从而实现撤销功能。需要注意的是，每次调用 putImageData 都会覆盖画布上的全部内容，因此撤销操作前的状态必须要先存储起来。

通过上述代码和逻辑，我们可以在Canvas应用中添加擦除和撤销功能，增强用户体验。这些基本功能的实现为 Canvas 应用的可扩展性和丰富性奠定了坚实的基础。

本文还有配套的精品资源，点击获取

简介：本教程详细指导如何使用HTML5的canvas元素创建一个具有手写输入功能的画板应用。介绍了HTML5 Canvas的基础知识，如何在HTML中创建canvas元素并用JavaScript操纵它来绘制2D图形。涵盖了画笔设置、监听鼠标事件、画笔颜色和线条宽度的改变，以及如何保存和加载画作。此外，还提供了性能优化的方法，并概述了如何通过添加更多交互功能来扩展画板应用。

本文还有配套的精品资源，点击获取