canvas变色笔
- 老规矩，先看效果图
image.png
- 需要注意几点：
- 使用 ES6 的模板字符串，来修改 hsl 的值
- 处理改变色调值和线条粗细的临界状态
- HSL(设置或返回用于描绘的颜色，渐变色或图案)
H：Hue(色调)。取值为：0 - 360; 0(或360)表示红色，120表示绿色，240表示蓝色，
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
- HTML
<canvas id="draw" width="800" height="800"></canvas>
- CSS
html,
body {
overflow: hidden;
}
- JavaScript
const canvas = document.getElementById("draw");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 设置默认的填充颜色
ctx.strokeStyle = "#ccc";
// 设置两条线相汇时所创建的边角的类型为圆角。
ctx.lineJoin = "round";
// 设置或返回线的端点的样式。将它设置为圆形，
// 当不遇到其他线时，仍然会得到相同的整齐的圆形，具体取决于定义的线的宽度。
ctx.lineCap = "round";
// 设置当前线条的宽度
ctx.lineWidth = 70;
let isDrawing = false;
//定义两个全局变量：lastX，lastY，并设置他们的初始值为 0.
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;
function draw(e) {
if (!isDrawing) return;
// 通过使用 ES6 的模板字符串，来修改 hsl 的值
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
// 新建一个路径，或者重置当前的路径。每次事件被触发，都执行这个动作
ctx.beginPath();
// 移动路径到画布指定的点上，但还没绘制线
ctx.moveTo(lastX, lastY);
// 增加新的点，并从上一个点到新的点之间绘制一条线
ctx.lineTo(e.offsetX, e.offsetY);
// 真正绘制你已经定义的路径
ctx.stroke();
// 使用 ES6 的数组解构，将解构出来的值，赋值给全局变量
[lastX, lastY] = [e.offsetX, e.offsetY];
hue++;
// 一旦色调值增加到360,将 hue 的值重置为0
if (hue >= 360) {
hue = 0;
}
// 将变量 lastX 和 lastY 设置为当前事件的偏移属性。
// 为了确保当我们在画布上从一个点移动到另一个点时，我们可以在画布上看到这条线。
if (ctx.lineWidth >= 70 || ctx.lineWidth <= 1) {
direction = !direction;
}
// 检查变量 direction 的值是否为true。
// 如果是，则将 lineWidth 的值增加1，否则将 lineWidth 重置为0
direction ? ctx.lineWidth++ : ctx.lineWidth--;
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
