js08 - Fun with HTML5 Canvas

内容

  <canvas id="draw" width="800" height="800"></canvas>
  <script>
    let canvas = document.querySelector('#draw');
    let ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    //设置画笔
    ctx.lineWidth = 90;//线条宽度
    ctx.lineJoin = 'round';//线条相较方式 round|bevel|miter
    ctx.fillStyle = 'f00';//线条填充颜色
    ctx.lineCap = 'round';//笔触形状
    ctx.strokeStyle = 'f00'//线条描边颜色
    let hue = 0;
    let direction = true;
    let x = 0;
    let y = 0;

    function draw(e) {
      if (!isDrawing) return;
      if (e.type == "mousemove") {
        x = e.offsetX;
        y = e.offsetY;
      }
      //设置画笔颜色变化
      ctx.strokeStyle = `hsl(${hue},90%,50%`;
      if (hue >= 360)
        hue = 0;
        hue++;
      
      //改变笔触大小
      if (ctx.lineWidth > 120 || ctx.lineWidth < 10) {
        direction = !direction;
      }
      if (direction) {
        ctx.lineWidth++;
      } else {
        ctx.lineWidth--
      }
      //
      ctx.beginPath();//新建路径
      ctx.moveTo(lastX, lastY);//绘制操作的起点
      ctx.lineTo(x, y);//路径的终点
      ctx.stroke();//绘制轮廓
      [lastX, lastY] = [x, y]
    }
    //增加监听
    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>