JavaScript 30 Day -- 07 彩虹画笔

实现效果：

可供鼠标画画，颜色呈彩虹色渐变，画笔大小同样呈渐变效果。

关键点：

Canvas：
    基本属性
        getContext()
        strokeStyle //线条描边的颜色
        fillStyle //填充的颜色
        lineCap //笔触的形状，有 round | butt | square 圆、平、方。
        lineJoin //线条相较的方式，有 round | bevel | miter 圆交、斜交、斜接。
    路径绘制
        beginPath() //新建一条路径
        lineTo() //路径的终点
        moveTo() //（此次）绘制操作的起点
        stroke() //绘制轮廓
    鼠标事件处理：
        mousemove
        mousedown
        mouseup
        mouseout
彩虹渐变颜色——HSL
    H(hue) 代表色调，取值为 0~360，专业术语叫色相
    S 是饱和度，可以理解为掺杂进去的灰度值，取值为 0~1
    L 则是亮度，取值也是 0~1，或者百分比。
这之中 H 值从 0 到 360 的变化代表了色相的角度的值域变化，利用这一点就可以实现绘制时线条颜色的渐变了，只需要在它的值超过 360 时恢复到 0 重新累加即可。

html

<canvas id="draw" width="800" height="800"></canvas>

javascript

    //获取 HTML 中的 <canvas> 元素，并设定宽度和高度
    var canvas = document.querySelector("#draw");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext('2d');

    //设定 ctx 基本属性
    ctx.strokeStyle = "#999"; //线条描边的颜色
    ctx.lineJoin = "round"; //线条相交的方式
    ctx.lineCap = 'round'; //笔触的形状

    // ctx.globalCompositeOperation = 'multiply';   
    // ctx.globalCompositeOperation = ' source-over';

    let isDrawing = false;
    let lastx,lasty;
    let direction = true;
    let hsl = 0;
    // let yan2 = 0;

    function draw(e) {

        if(!isDrawing) return;
        // console.log(e);

        // 彩虹渐变颜色——HSL
        ctx.strokeStyle = `hsl(${hsl},100%,50%)`;
        ctx.beginPath(); //新建一条路径
        ctx.moveTo(lastx,lasty); //（此次）绘制操作的起点
        // ctx.moveTo(e.offsetX,e.offsetY);
        ctx.lineTo(e.offsetX,e.offsetY); //路径的终点
        ctx.stroke(); //绘制轮廓
        [lastx,lasty] = [e.offsetX , e.offsetY];
        hsl++;
        if(hsl > 360){
            hsl = 0;
        }
        if(ctx.lineWidth >=100 || ctx.lineWidth <= 1){
            direction = !direction;
        }
        if(direction){
            ctx.lineWidth++;
        }else{
            ctx.lineWidth--;
        }
        //ctx.lineWidth = hsl; //线条的宽度
        // yan2++;
        // if(yan2 >100){
        //  yan2 = 0;
        // }
    }   

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