canvas技术学习

一、管道流动动画

     var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var offset = 0;

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.strokeStyle = "#0000ff";
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.moveTo(20, 20); // 创建开始点
        ctx.lineTo(100, 20); // 创建水平线
        ctx.arcTo(150, 20, 150, 22, 2); // 创建弧
        ctx.lineTo(150, 120); // 创建垂直线
        ctx.setLineDash([8, 8]);
        ctx.stroke();
        ctx.lineDashOffset = -offset;
      }

      function march() {
        offset++;
        if (offset > 200) {
          offset = 0;
        }
        draw();
        setTimeout(march, 100);
      }

      march();