JS30 Day 8 - Fun with HTML5 Canvas 学习笔记

今天主要利用 <canvas> 这个 HTML 元素来做出我们要的功能，我们可以利用程式脚本在这个元素上绘图（通常是用 JS）、合成图片或动画效果。

而我们今天所要的功能为在画布按下鼠标并拖曳可以画出色彩，并会线条改变粗细，放开或离开画布就停止。

首先，获取canvas元素。

    <canvas id="draw" width="800" height="800"></canvas>    let canvas = document.querySelector('#draw'); 

HTMLCanvasElement.getContext():

由于一开始canvas为空白，需先存取渲染环境，在上面绘图，然后才会显现影像
getContext():此方法可以取得渲染环境及其绘图函数(function),参数有'2d',
'webgl'(3d)等等。此处用2d

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

设置canvas下的样式及状态

      // 设置画画状态      let drawing = false;      // 用来判断线条变粗变细      let direction = -1;      // 设置初始座标      let x = 0,y = 0;      // 线条宽度(预设为1)      let lineWidth = 50;      ctx.lineWidth = lineWidth;      // 端点样式:有 'square'(方)、'round' (圆)、(预设为butt(切平))      ctx.lineCap = 'round';      // 交叉点样式:有'bevel'(斜角)'roun'(圆)、(预设为butt(尖角))      ctx.lineJoin = 'round';      

hsl():css函数，使用色相饱和度、亮度模型（HSL）定义颜色。

颜色属性HSL Colors，此属性可透过色相环上的角度来取得不同颜色
hsl(hue, saturation(饱和度), lightness(亮度));

CanvasRenderingContext2D.strokeStyle图形边线的颜色和样式。 预设 #000 (黑色).
CanvasRenderingContext2D.fillStyle 图形内部的颜色和样式。预设 #000 (黑色).

      // 设置颜色初始值(角度)      let colorDeg = 0;      ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;      

最后我们加上滑鼠事件来进行处理

mousedown:当滑鼠按下表示开始画画，并记录初始位置

      canvas.addEventListener('mousedown', (e) => {        drawing = true;        // 纪录当前滑鼠点击的位置        [x, y] = [e.offsetX, e.offsetY];      });      

mousemove:当滑鼠移动(连续触发)开始画图

CanvasRenderingContext2D.beginPath():此方法可创建一个新的路径(表示开始画)。

CanvasRenderingContext2D.moveTo():将一个新路径的起始点移动到(x，y)坐标(刚刚滑鼠点击纪录的位置)

CanvasRenderingContext2D.lineTo():使用直线连接路径最后的点到x,y坐标(当前最后点的位置)。

CanvasRenderingContext2D.stroke():根据当前的画线样式，渲染出当前或已经存在的路径的方法。

canvas.addEventListener('mousemove', (e) => {        if (!drawing) {          return        }        // console.log('draw');        // 开始画        ctx.beginPath();        // 每当移动(+1度)就改变色环角度        colorDeg = colorDeg < 360 ? colorDeg + 1 : 0;        // 如果减到小于1或+到大于50，就切换方向(变粗或变细)        if (lineWidth < 1 || lineWidth > 50) {          direction *= -1;        }        // 每当移动就改变粗细        lineWidth += direction;        ctx.lineWidth = lineWidth;                ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;                // 新路径的起始点        ctx.moveTo(x, y);        // 使用直线连接路径(当前的点到起始点)        ctx.lineTo(e.offsetX, e.offsetY);                // 更新纪录当前滑鼠点击的位置        [x, y] = [e.offsetX, e.offsetY];                // 如果不加上storke，就只是连起来，但没画出来，一定要加上storke来渲染        ctx.stroke();      });

mouseup、mouseleave:当滑鼠放开或离开就停止。

   canvas.addEventListener('mouseup', () => {    drawing = false;  });  // 不使用mouseout，因为会连续触发  canvas.addEventListener('mouseleave', () => {    drawing = false;  });    

最后结果如下