canvas变色笔

canvas变色笔

• 老规矩，先看效果图

image.png

• 需要注意几点：

1. 使用 ES6 的模板字符串，来修改 hsl 的值
2. 处理改变色调值和线条粗细的临界状态

• 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);