本文例項為大家分享了 canvas實現動態點線效果的具體程式碼，供大家參考，具體內容如下

效果預覽

1.實現效果

• 畫彩色點
• 相近的點產生連線
• 點線運動，遇到邊界反彈
• 選中點，可拖動點改變位置*

2.具體實現

初始化相關變數

var c = document.getElementById("myCanvas");
      //設定canvas大小
      c.height = document.body.offsetHeight;
      c.width = document.body.offsetWidth;
      //canvas跟隨視窗大小
      windo
 
w.onresize = function() {
        c.height = document.body.offsetHeight;
        c.width = document.body.offsetWidth;
      };

      var theCanvas = c.getContext("2d");
      var pointList = []; //儲存points
      var anim = null;
      var selectPoint = null;

構造物件儲存相關點線資料

var PointLine = function(canvas,x,y,r,color) {
        this.theCanvas = canvas;
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color; //點顏色
        this.speed = 5; //點移動速度
        //移動方向
        this.direction = parseInt(Math.random() * 1000) % 4; //0 -x www.cppcns.com
 
1 x 2-y 3 y
        this.drawPoint = function() {
          this.theCanvas.beginPath();
          this.theCanvas.fillStyle = this.color;
          this.theCanvas.arc(this.x,this.y,this.r,360);
          this.theCanvas.fill();
        };
        //檢查是否出界，若出界就改變為反方向
        this.checkX = function(x) {
          if (x - this.r <= 0) {
            this.x = this.r;
            this.direction = 1;
          } else if (x + this.r >= this.theCanvas.canvas.width) {
            this.x = this.theCanvas.canvas.width - this.r;
            this.direction = 0;
          } else this.x = x;
        };
        this.checkY = function(y) {
          if (y - this.r <= 0) {
            this.y = this.r;
            this.direction = 3;
          } else if (y + this.r >= this.theCanvas.canvas.height) {
            this.y = this.theCanvas.canvas.height - this.r;
            this.direction = 2;
          } else this.y = y;
        };
        //移動點
        this.movePoints = function() {
          if (this.direction == 0) {
            this.checkX(this.x - parseInt(Math.random() * this.speed));
          } else if (this.direction == 1) {
            this.checkX(this.x + parseInt(Math.random() * this.speed));
          } else if (this.direction == 2) {
            this.checkY(this.y - parseInt(Math.random() * this.speed));
          } else if (this.direction == 3) {
            this.checkY(this.y + parseInt(Math.random() * this.speed));
          }
        };
        return this;
      };

畫兩點間連線

//兩點間連線
function drawLine(start,end) {
        theCanvas.strokeStyle = "rgba(204,204,0.5)";
        theCanvas.beginPath();
        theCanvas.moveTo(start.x,start.y);
        theCanvas.lineTo(end.x,end.y);
        theCanvas.stroke();
      }
      //兩點之間距離
      functi客棧on getDistance(p1,p2) {
        return Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2);
      }
      var minDistance = parseInt(0.1 * theCanvas.canvas.height);
      minDistance = minDistance * minDistance; //連線的最短距離
      //一點與其他點連線
      function drawLinkLine(p1) {
        for (var j = 0; j < pointList.length; j++) {
          var p2 = pointList[j];
          if (p2.x == p1.x && p2.y == p1.y) continue;

          var line = getDistance(p1,p2);
          if (line < minDistance && line > 0) {
            drawLine(p1,p2);
          }
        }
      }

生成隨機點

//生產隨機顏色
      function randColor() {
        return (
          "rgb(" +
          [
            Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255)
          ].join(",") +
          ")"
        );
      }
//生成隨機點
      function createPoint() {
        var x = parseInt(Math.random() * theCanvas.canvas.width);
        var y = parseInt(Math.random() * theCanvas.canvas.height);
        var r = 5 + parseInt(Math.random() * 20);
        if (x - r < 0) x = r;
        else if (x + r > theCanvas.canvas.width) x = theCanvas.canvas.width - r;

        if (y - r < 0) x = r;
        else if (y + r > theCanvas.canvas.height)
          y = theCanvas.canvas.height - r;
        return new PointLine(theCanvas,randColor());
      }
      //生成100個隨機點線
      for (var i = 0; i < 100; i++) {
        pointList.push(createPoint());
      }

相容瀏覽器canvas動畫幀

//啟用動畫
      function canvasAnimation() {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback,element) {
            var self = this,start,finish;
            window.setTimeout(function() {
              start = +new Date();
              callback(start);
              finish = +new Date();
              self.timeout = 1000 / 60 - (finish - start);
            },self.timeout);
          }
        );
      }
      //取消動畫
      function canvasCancleAnim() {
        return (
          window.cancelAnimationFrame ||
          window.webkitCancelAnimationFrame ||
          window.mozCancelAnimationFrame ||
          window.mosCancelAnimationFrame ||
          window.clearTimeout
        );
      }

開始動畫

//迴圈執行canvas動畫
function start() {
        anim = canvasAnimation()(this.start);
        //清空canvas
        theCanvas.clearRect(
          0,theCanvas.canvas.width,theCanvas.canvas.height
        );
        //畫點線
        for (var i = 0; i < this.pointList.length; i++) {
          var p = pointList[i];
          drawLinkLine(p);
          p.drawPoint();
          if (selectPoint && selectPoint == p) continue;
          p.movePoints();
        }
      }

      //開始動畫
      start();

選中點進行拖動

//px座標轉canvas座標
function windowToCanvas(canvas,y) {
        var bbox = canvas.getBoundingClientRect();
        return {
          x: x - bbox.left * (canvas.width / bbo程式設計客棧x.width),y: y - bbox.top * (canvas.height / bbox.height)
        };
      }
      //設定動作，按下選中點
      
      theCanvas.canvas.onmousedown = function(e) {
       
        var loc = windowToCanvas(theCanvas.canvas,e.clientX,e.clientY);      
        for (var i = 0; i < pointList.length; i++) {
          var p = pointList[i];
         
          if (getDistance(p,loc)<100) {
            selectPoint = p;
            break;
          }
        }
      };
      //移動點
      theCanvas.canvas.onmousemove = function(e) {
        if (selectPoint) {
          var loc = windowToCanvas(theCanvas.canvas,e.clientY);
          selectPoint.x = loc.x;
          selectPoint.y = loc.y;
         
        }
      };
      //取消選中點
      theCanvas.canvas.onmouseup = function(e) {
        selectPoint = null;
       
      };

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。