JavaScipt30(第八个案例)（主要知识点：canvas）

承接上文，这是第8个案例，要实现的效果是按住鼠标不放，进行拖动时可以在画布上画出不同粗细不同颜色的曲线。

附上项目链接: https://github.com/wesbos/JavaScript30

主要思路：鼠标按下时，记录当前x,y坐标，作为起点，鼠标移动时开始画线。鼠标左键抬起或移出画布时停止绘画。没什么讲的，有个值得注意的点，hsl这个表现颜色，我之前不知道的。附上源码：

<script>const canvas = document.querySelector('#draw');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx.strokeStyle = '#BADA55';ctx.lineJoin = 'round';ctx.lineCap = 'round';ctx.lineWidth = 100;// ctx.globalCompositeOperation = 'multiply';
let isDrawing = false;let lastX = 0;let lastY = 0;let hue = 0;let direction = true;function draw(e) {if (!isDrawing) return; // stop the fn from running when they are not moused down
                console.log(e);
//                 HSL(H,S,L),css3颜色值表示方式,
//                 H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
//                 S：Saturation(饱和度)。取值为：0.0% - 100.0%
//                 L：Lightness(亮度)。取值为：0.0% - 100.0%ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;ctx.beginPath();// start from
                ctx.moveTo(lastX, lastY);// go to
                ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] = [e.offsetX, e.offsetY];hue++;if (hue >= 360) {hue = 0;}if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {direction = !direction;}if (direction) {ctx.lineWidth++;} else {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);</script>