这是我们的小涂鸦画布的代码（下面有详细代码说明）：
<body bgcolor='black'>
<canvas id="myCanvas" width="800" height="600" style="touch-action:none; "></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let counter = 0;
context.strokeStyle = `hsl(${counter % 360},100%,50%)`;
context.shadowColor = `hsl(${counter % 360},100%,50%)`;
context.shadowBlur = 5;
context.lineWidth = '2';
let draw = false;
window.onpointerdown = function(event) {
draw = true;
context.beginPath();
context.moveTo(event.offsetX, event.offsetY);
if (!event.isPrimary || event.button == 2) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
};
window.onpointermove = function(event) {
if (draw) {
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
}
};
window.onpointerup = function(event) {
draw = false;
counter += 18;
context.strokeStyle = `hsl(${counter % 360},100%,50%)`;
context.shadowColor = `hsl(${counter % 360},100%,50%)`;
};
</script>
</body>
</html>
- 第[1-6]行设置了HTML5 Canvas
- [7]，初始化颜色计数器
- [8-9]将当前颜色分配给该行，而阴影
- [10]则赋予模糊效果的强度。模糊是主体形状周围的随机像素，从而产生“辉光”效果。
- [11]线的宽度
- [12]我们要等到指针向下时才能绘制
整个动作都在以下三个指针功能中：
1.鼠标点击
- [15]开始绘制
- [16]开始绘制路径
- [17]移动将笔指向指针（鼠标/触摸）位置
- [18-19]，如果一根手指以上触摸屏幕或单击鼠标右键，请清除画布
2.鼠标移动
- [24-26]如果开始绘制， 请在当前指针位置绘制一条线。请注意，整个路径与模糊一起被重新绘制。模糊是使整条线越厚，移动得越多的原因。
3.鼠标离开
- [31]停止绘制
- [32]增加颜色计数器
- [33-34]根据计数器设置笔触和阴影颜色 大多数人都熟悉RGB颜色模型（红色/绿色/蓝色），但是这里我们正在使用HSL（色相/饱和度/亮度）模型。 运作方式如下：
色相的范围是0到360，因此，如果我们每次增加18，则在20笔触之后我们会恢复到原始颜色。
为简单起见，我们始终将“饱和度”设置为100％，将“亮度”设置为50％。
这是上面产生彩虹的代码：
<body>
<canvas id="myCanvas2" width="720" height="100"></canvas>
<script>
let canvas2 = document.getElementById("myCanvas2");
let context2 = canvas2.getContext("2d");
for (let x = 0; x < 360; x++) {
context2.fillStyle = `hsl(${x},100%,50%)`;
context2.fillRect(x * 2, 0, 2, 100);
}
</script>
</body>
</html>
您可能需要添加一些想法：
- -“撤消”功能
- -图像保存
- -颜色选择
- -形状（圆形/矩形）
自己加一下吧
