canvas点按照轨迹移动

;(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'
    ? (module.exports = factory())
    : typeof define === 'function' && define.amd
    ? define(factory)
    : (global.TrackLine = factory())
})(this, function () {
  'use strict'

  var tool = {
    //计算两点间距离
    getDistance: function getDistance(p1, p2) {
      return Math.sqrt(
        (p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1])
      )
    },
  }

  var global = typeof window === 'undefined' ? {} : window

  var requestAnimationFrame =
    global.requestAnimationFrame ||
    global.mozRequestAnimationFrame ||
    global.webkitRequestAnimationFrame ||
    global.msRequestAnimationFrame ||
    function (callback) {
      return global.setTimeout(callback, 1000 / 60)
    }

  var TrackLine = function TrackLine(userOptions) {
    //全局参数
    var self = this
    var canvas = document.getElementById('path')
    var context = canvas.getContext('2d')
    var width = canvas.width || window.innerWidth
    var height = canvas.height || window.innerHeight
    var lines = [] //所有线条
    canvas.style.cssText =
      'position:absolute;' +
      'left:0;' +
      'top:0;' +
      'z-index:0;user-select:none;'

    //默认参数
    var options = {
      lineWidth: 1,
      strokeStyle: '#F9815C',
      isShowLine: true,
      isAnimate: true,
      radius: 3,
      shadowBlur: 6,
      shadowColor: '#fff',
      speed: 3,
    }

    //参数合并
    var merge = function merge(userOptions, options) {
      Object.keys(userOptions).forEach(function (key) {
        options[key] = userOptions[key]
      })
    }

    //线条
    function Line(options) {
      this.options = options
      this.fillStyle = options.fillStyle || '#F9815C'
      this.turnPoints = options.data || [
        [15, 15],
        [100, 15],
        [115, 25],
        [100, 40],
        [15, 40],
        [0, 25],
      ] //画一个四方形
      this.step = 0
      this.pointList = options.pointList || this.getPointList()
    }

    Line.prototype.getPointList = function () {
      var turnPoints = this.turnPoints
      var pointList = (this.pointList = [])
      if (turnPoints.length < 2) {
        return []
      }
      for (var i = 0; i < turnPoints.length; i++) {
        var start = turnPoints[i]
        var end = turnPoints[i + 1]
        if (start && end) {
          var distance = Math.floor(tool.getDistance(start, end))
          var vx = (end[0] - start[0]) / distance
          var vy = (end[1] - start[1]) / distance
          for (var j = 0; j < distance; j++) {
            pointList.push([start[0] + vx * j, start[1] + vy * j])
          }
        }
      }
    }

    Line.prototype.draw = function (context) {
      var pointList = this.turnPoints

      if (pointList.length >= 2) {
        context.beginPath()
        context.moveTo(0, 25)
        context.lineWidth = options.lineWidth
        context.strokeStyle = options.strokeStyle
        for (var i = 0; i < pointList.length; i++) {
          var x = pointList[i][0]
          var y = pointList[i][1]
          context.lineTo(x, y)
        }
        context.stroke()
        context.closePath()
      }
    }

    Line.prototype.drawMoveCircle = function (context) {
      var pointList = this.pointList || this.getPointList()
      console.log(this.step, pointList)
      context.save()
      context.fillStyle = options.fillColor
      context.shadowColor = options.shadowColor
      context.shadowBlur = options.shadowBlur
      context.beginPath()
      context.arc(
        pointList[this.step][0],
        pointList[this.step][1],
        options.radius,
        0,
        Math.PI * 2,
        true
      )
      context.fill()
      context.closePath()
      context.restore()
      this.step += options.speed
      console.log(this.step)
      if (this.step >= pointList.length) {
        this.step = 0
      }
    }

    //初始化线条
    var createLine = function createLine() {
      var lines = (self.lines = [])
      for (var i = 0; i < options.data.length; i++) {
        lines.push(new Line(options.data[i]))
      }
    }

    //渲染
    var render = function render() {
      context.fillStyle = 'rgba(0,0,0,.93)'
      var prev = context.globalCompositeOperation
      context.globalCompositeOperation = 'destination-in'
      context.fillRect(0, 0, width, height)
      context.globalCompositeOperation = prev

      var lines = self.lines
      //静态背景线条渲染
      for (var i = 0; i < lines.length; i++) {
        lines[i].draw(context)
      }
      //动画渲染

      for (var j = 0; j < lines.length; j++) {
        lines[j].drawMoveCircle(context) //移动圆点
      }
    }

    //初始化
    var init = function init(options) {
      merge(userOptions, options)

      createLine()
      ;(function drawFrame() {
        requestAnimationFrame(drawFrame)
        render()
      })()
    }

    init(options)
    self.options = options
  }

  return TrackLine
})

html代码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        canvas {
            background-color: black;
        }
    </style>
</head>

<body>
    <canvas id="path" width="500" height="500"></canvas>

    <script type="text/javascript" src="./canvas-line.js"></script>
    <script type="text/javascript">

        // var data = [[[70, 70], [120, 120], [140, 140]]];
        var data = [[[15, 15], [100, 15], [115, 25], [100, 40], [15, 40], [0, 25]]];
        var moveLine = new TrackLine({
            //marker点半径
            markerRadius: 2,
            //marker点颜色,为空或null则默认取线条颜色
            markerColor: null,
            //线条类型 solid、dashed、dotted
            lineType: 'solid',
            //线条宽度
            lineWidth: 1,
            //线条颜色
            colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
            //移动点半径
            radius: 3,
            //移动点颜色
            fillColor: '#fff',
            //移动点阴影颜色
            shadowColor: '#fff',
            //移动点阴影大小
            shadowBlur: 10,

            data: data
        });

        var options = {
            //移动点半径
            moveRadius: 2,
            //移动点颜色
            fillColor: '#fff',
            //移动点阴影颜色
            shadowColor: '#fff',
            //移动点阴影大小
            shadowBlur: 10,
        };



    </script>

</body>