介绍
本项目实现了一个基于 HTML5 Canvas 的像素艺术编辑器。用户可以选择颜色和画笔大小进行绘画，同时也支持撤销和清空操作。该项目主要涉及到 JavaScript 中的事件处理、Canvas 绘图以及面向对象编程等知识点。
技术细节
1. HTML
在 HTML 中，我们需要创建一个 Canvas 元素用于显示绘图区域，并创建一些控制按钮用于选择颜色和画笔大小等功能。
-- -------------------- ---- ------- ------- ----------- ----------- ---------------------- ----- ---------- ------ ------------ ------------------ ------ ----- ------------ ------ ------------ ---------------- ------- -------- -------- ---------- ------ ------- -------------------------- ------- -------------------------
2. JavaScript
首先，我们需要获取 Canvas 元素以及其中的上下文对象进行绘制。同时，定义一个数组存储所有绘制过的像素信息，以便进行撤销操作。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let pixels = [];接着，我们需要绑定事件处理程序来响应用户的操作。对于绘画，我们需要监听鼠标按下、移动以及松开事件，处理过程如下：
-- -------------------- ---- ------- --- ---------- - ------ --- ------ ------ ------------------------------------ --- -- - ---------- - ----- ------- ------ - ----------- ----------- --------------- ------ -- ------ ------ -------------- ----- ---------------- --- ------------------------------------ --- -- - -- ------------- ------- ----- --- -- - ----------- ----------- --------------- ------ -- --- ------- ------ - --- --- --------------- -- ------ -------------- ----- ---------------- --- ---------------------------------- -- -- - ---------- - ------ ---
在绘制行为中，我们记录下每个像素的坐标、颜色和大小等信息，并将其存储到数组中。
对于撤销操作，我们可以通过删除最后一个像素并重新绘制画布来实现。清空操作则是直接清空所有像素数组并用白色填充画布。
-- -------------------- ---- ------- ------------------------------------------------------------- -- -- - ------------- --------------- --- -------------------------------------------------------------- -- -- - ------ - --- ------------- - -------- --------------- -- ------------- --------------- ---
接下来是绘制像素的函数 drawLine，其中包含了颜色、大小等属性的设置。
-- -------------------- ---- -------
-------- ------------ --- --- --- -
----------------
-------------- ----
-------------- ----
-------------
----------------
-
-------- -------------- -
------------- - --------
--------------- -- ------------- ---------------
---------------- -- -
------------- - --------
--------------- - --------
------------- - -------
-------------- -----
---
-
-------- ------------ -- -
----------------
---------- -- ------------- - -- -- ------- - ---
-----------
-最后，我们需要监听画笔颜色和大小的变化，并及时更新上下文对象中的属性值。
document.getElementById('color-picker').addEventListener('change', (e) => {
const color = e.target.value;
ctx.fillStyle =
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32190) ，转载请注明来源
[https://www.javascriptcn.com/post/32190](https://www.javascriptcn.com/post/32190)