使用Canvas制作画板

在本篇技术博客中，我们将使用JavaScript和Canvas技术来创建一个简单的画板应用程序。这个画板将允许用户在一个画布上绘制线条，使用橡皮擦擦除绘制的内容，更改线条的颜色和宽度，并支持撤销和重做功能。

准备工作

在开始之前，我们需要一个HTML文件来设置画板的基本结构。请创建一个index.html文件，并将以下内容复制到其中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas 画板</title>
</head>
<body><canvas id="can"></canvas><input type="color" id="colorInput"><input type="range" id="lineWidthRange" min="1" max="20" step="1"><span id="lineWidthValue">1</span><button id="clearAllBtn">清空画板</button><button id="eraserBtn">使用橡皮擦</button><input type="range" id="eraserLineWidthRange" min="1" max="20" step="1"><span id="eraserLineWidthValue">1</span><div id="eraserCircle"></div><script src="app.js"></script>
</body>
</html>

接下来，我们需要一个app.js文件，用于编写JavaScript代码。请在项目根目录下创建一个app.js文件，并将你提供的代码复制到其中。

实现功能

现在，我们将详细解释一下代码中的每个部分，并说明它们如何协同工作来创建一个完整的画板应用。

画布初始化

const oCan = document.getElementById('can');
const ctx = oCan.getContext('2d');const oColorInput = document.getElementById('colorInput');
const oLineWidthRange = document.getElementById('lineWidthRange');
const oLineWidthValue = document.getElementById('lineWidthValue');
const oClearAllBtn = document.getElementById('clearAllBtn');
const oEraserBtn = document.getElementById('eraserBtn');
const oEraserLineWidthRange = document.getElementById('eraserLineWidthRange');
const oEraserLineWidthValue = document.getElementById('eraserLineWidthValue');
const oEraserCircle = document.getElementById('eraserCircle');const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;oCan.width = clientWidth;
oCan.height = clientHeight;

以上代码片段获取了HTML元素和Canvas上下文对象，并设置了画布的宽度和高度等于视口的宽度和高度，以确保画布可以铺满整个屏幕。

状态和常量定义

const state = {initPos: null,eraserStatus: false,drewData: [],revokedData: []
}const DATA_FIELD = {DREW: 'drewData',REVOKED: 'revokedData'
}const DATA_TYPE = {MOVE_TO: 'moveTo',LINE_TO: 'lineTo'
}const CANVAS_VALUES = {DEFAULT_COLOR: '#000',DEFAULT_LINE_STYLE: 'round',DEFAULT_LINE_WIDTH: 1,ERASER_COLOR: '#fff'
}const KEYBOARD = {UNDO: 'z',REDO: 'b'
}

这部分代码定义了画板应用的状态和常量。state对象用于跟踪用户的操作和绘制数据。DATA_FIELD和DATA_TYPE用于标识绘制数据的不同部分。CANVAS_VALUES定义了画布的一些默认值，包括默认颜色、线条样式和线条宽度。KEYBOARD定义了用于撤销和重做的键盘按键。

初始化和事件绑定

const init = () => {initStyle();bindEvent();
}function initStyle() {ctx.setColor(CANVAS_VALUES.DEFAULT_COLOR);ctx.setLineStyle(CANVAS_VALUES.DEFAULT_LINE_STYLE);ctx.setLineWidth(CANVAS_VALUES.DEFAULT_LINE_WIDTH);
}function bindEvent() {oCan.addEventListener('mousedown', handleCanvasMouseDown, false);oColorInput.addEventListener('click', handleColorInput, false);oColorInput.addEventListener('input', handleColorInput, false);oLineWidthRange.addEventListener('input', handleLineWidthRangeInput, false);oClearAllBtn.addEventListener('click', handleClearAllBtnClick, false);oEraserBtn.addEventListener('click', handleEraserBtnClick, false);oEraserLineWidthRange.addEventListener('input', handleEraserLineWidthRangeInput, false);document.addEventListener('keydown', handleKeyDown, false);
}

这部分代码定义了初始化和事件绑定函数。init函数调用了initStyle和bindEvent函数来初始化画布样式并绑定事件监听器。

initStyle函数设置了画布的默认颜色、线条样式和线条宽度。

bindEvent函数绑定了鼠标和键盘事件的处理函数，这些事件包括鼠标点击、颜色选择、线条宽度选择、清空画板、使用橡皮擦和撤销/重做操作。

绘制函数

function drawPoint(x, y) {ctx.beginPath();ctx.arc(x, y, ctx.lineWidth / 2, 0, 2 * Math.PI, false);ctx.fill();
}function drawLine({ x1, y1, x2, y2 }) {ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();
}function drawBatchLine() {clearAll();state[DATA_FIELD.DREW].forEach(item => {ctx.beginPath();const { moveTo: [x1, y1], lineTo, info: { color, width } } = item;ctx.setColor(color);ctx.setLineWidth(width);ctx.moveTo(x1, y1);lineTo.forEach(line => {ctx.lineTo(...line);});ctx.stroke();})
}function clearAll() {ctx.clearRect(0, 0, oCan.offsetWidth, oCan.offsetHeight);
}

以上代码片段包含了绘制相关的函数。drawPoint用于绘制一个点，drawLine用于绘制直线，drawBatchLine用于批量绘制用户的绘制数据，clearAll用于清空画布。

事件处理函数

// 省略其他事件处理函数...function handleKeyDown(e) {const key = e.key;console.log(key);if ((e.metaKey || e.ctrlKey) && (Object.values(KEYBOARD).includes(key))) {doDrewRecord(key);drawBatchLine();}if (!state[DATA_FIELD.DREW].length || !state[DATA_FIELD.REVOKED].length) {ctx.setColor(oColorInput.value);ctx.setLineWidth(oLineWidthRange.value);}
}function handleCanvasMouseDown(e) {// 省略其他事件处理代码...
}

以上代码片段包含了处理键盘事件和鼠标事件的函数。handleKeyDown函数用于处理键盘事件，当用户按下Ctrl键（或Cmd键在macOS上）加上Z或B键时，会触发撤销和重做操作。handleCanvasMouseDown函数用于处理鼠标按下事件，开始绘制操作。

辅助函数

// 省略其他辅助函数...function setDrewRecord(type, data) {switch (type) {case DATA_TYPE.MOVE_TO:state[DATA_FIELD.DREW].push({[DATA_TYPE.MOVE_TO]: [...data],[DATA_TYPE.LINE_TO]: [],info: {color: ctx.getColor(),width: ctx.getLineWidth()}})break;case DATA_TYPE.LINE_TO:const drewData = state[DATA_FIELD.DREW];drewData[drewData.length - 1][DATA_TYPE.LINE_TO].push([...data]);break;default:break;}
}function doDrewRecord(key) {switch (key) {case KEYBOARD.UNDO:state[DATA_FIELD.DREW].length > 0&&state[DATA_FIELD.REVOKED].push(state[DATA_FIELD.DREW].pop());break;case KEYBOARD.REDO:state[DATA_FIELD.REVOKED].length > 0&&state[DATA_FIELD.DREW].push(state[DATA_FIELD.REVOKED].pop());break;default:break;}
}
// 定义 EraserCircle 元素的显示与隐藏
oEraserCircle.setVisible = function (visible) {this.style.display = visible ? 'block' : 'none';
};// 定义 EraserCircle 元素的大小设置
oEraserCircle.setSize = function (size) {this.style.width = size + 'px';this.style.height = size + 'px';
};// 定义 EraserCircle 元素的位置设置
oEraserCircle.setPosition = function (x, y) {this.style.left = x - this.offsetWidth / 2 + 'px';this.style.top = y - this.offsetHeight / 2 + 'px';
};// 设置画笔颜色
ctx.setColor = function (color) {this.strokeStyle = color;this.fillStyle = color;
};// 获取画笔颜色
ctx.getColor = function () {return this.strokeStyle;
};// 设置线条样式（线帽和连接点）
ctx.setLineStyle = function (style) {this.lineCap = style;this.lineJoin = style;
};// 设置线条宽度
ctx.setLineWidth = function (width) {this.lineWidth = width;
};// 获取线条宽度
ctx.getLineWidth = function () {return this.lineWidth;
};

这些函数是对代码中省略的部分进行了完善，主要用于设置橡皮擦元素的显示与隐藏，以及对画笔颜色、线条样式和线条宽度的设置与获取。这些函数在画板应用中起着重要的作用，使用户能够自由选择画笔颜色、线条样式和线条宽度，同时在使用橡皮擦功能时，橡皮擦元素能够正确显示在鼠标位置。