素描画板工具：JavaScript & Canvas 的完美融合

JavaScript 和 Canvas 联合出击，开启数字艺术之旅

序言

在数字时代的今天，艺术创作不再局限于传统的画纸和颜料。让我们抛开物理媒介的束缚，踏入数字艺术的世界，携手 JavaScript 和 Canvas 这对强强搭档，在电脑屏幕上挥洒你的创意。

JavaScript 和 Canvas：数字画板的完美结合

JavaScript，一门灵活多变的编程语言，赋予了画板工具灵动性和交互性。而 Canvas，一个专门用于绘制图形的 HTML 元素，提供了丰富的绘图 API，让绘画创作变为现实。

打造画板工具：分步指南

1. 创建画布：

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

2. 获取上下文：

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

3. 实现绘图功能：

canvas.addEventListener('mousedown', e => {
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
});

canvas.addEventListener('mousemove', e => {
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
});

4. 添加工具栏：

<div id="toolbar">
  <button onclick="setBrushColor('red')">红色画笔</button>
  <button onclick="setBrushWidth(5)">5px 画笔</button>
</div>

5. 实时预览：

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

6. 保存和分享：

const dataURL = canvas.toDataURL();

// 保存为图片
const link = document.createElement('a');
link.href = dataURL;
link.download = 'myArtwork.png';
link.click();

// 分享到社交平台
window.open(`https://www.facebook.com/sharer/sharer.php?u=${dataURL}`);

激发创意，尽情创作

拥有 JavaScript 和 Canvas 的加持，你已拥有一块自由驰骋的画板。无论是涂鸦、素描，还是数字绘画，尽情挥洒你的艺术灵感。

随着对 JavaScript 和 Canvas 的深入探索，你还可以拓展画板工具的功能，添加高级绘图功能和效果。这将赋予你的数字艺术创作更多可能性。

常见问题解答

1. 如何更改画笔颜色？

ctx.fillStyle = 'red'; // 替换为所需的顏色

2. 如何调整画笔粗细？

ctx.lineWidth = 5; // 单位为像素

3. 如何使用橡皮擦？

ctx.fillStyle = 'white'; // 白色覆盖在已有图形上，達到擦除效果

4. 如何保存我的画作？

使用 canvas.toDataURL() 将画作转换为图像数据，并通过链接下载为图片。

5. 如何分享到社交平台？

使用 window.open() 打开一个新的窗口，指向包含图像数据的社交平台链接。

结论

JavaScript 和 Canvas 的组合为数字艺术创作开启了新的篇章。在这块数字画布上，挥洒你的创意，探索你的艺术潜能。告别传统，拥抱无限的可能性，让你的艺术之旅在数字世界中续写传奇。