canvas實現背景連線
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas背景連線</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/common.css"> </head> <style type="text/css"> body { padding-top: constant(safe-area-inset-top); //為導航欄+狀態列的高度 88px padding-left: constant(safe-area-inset-left); //如果未豎屏時為0 padding-right: constant(safe-area-inset-right); //如果未豎屏時為0 padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px } #canvas { display: block; background: #000; margin: 0 auto; } </style> <body> <!--------畫布-------> <canvas id="canvas"></canvas> <script> // 面向物件組合模式：建構函式放私有屬性 原型裡面放公共的方法(除objcet外，其餘的都有原型) function Stayrry() { //建構函式 //建構函式裡面的this是可以被原型呼叫的，this是指向你當前例項化的物件的 this.cxt = canvas.getContext('2d'); //構建畫布 canvas.width = window.innerWidth; canvas.height = window.innerHeight; this.cW = canvas.width; this.cH = canvas.height; this.num = 200; this.data = []; //儲存粒子的屬性 } Stayrry.prototype = { //原型 //初始化粒子:實心圓 init: function() { for(var i = 0; i < this.num; i++) { this.data[i] = { x: Math.random() * this.cW, y: Math.random() * this.cH, cx: Math.random() * 0.6 - 0.3, cy: Math.random() * 0.6 - 0.3 } this.drawCircle(this.data[i].x, this.data[i].y); } console.log(this.data); }, //繪製粒子 drawCircle: function(x, y) { var cxt = this.cxt; cxt.save(); //儲存路徑 cxt.fillStyle = "red"; cxt.beginPath(); //開始路徑 cxt.arc(x, y, 5, 0, Math.PI * 2, false); cxt.closePath(); //結束路徑 cxt.fill(); //填充方法 cxt.restore(); //釋放路徑 }, //繪製線條 drawLine: function(x1, y1, x2, y2) { var cxt = this.cxt; var color = cxt.createLinearGradient(x1, y1, x2, y2); color.addColorStop(0, "#369"); color.addColorStop(1, "#333"); cxt.save(); cxt.strokeStyle = color; cxt.beginPath(); cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.closePath(); //結束路徑 cxt.stroke(); //線條方法 cxt.restore(); //釋放路徑 }, //粒子運動 moveCircle: function() { var self = this; self.cxt.clearRect(0, 0, self.cW, self.cH); //清除畫布 //模擬的速度增量 for(var i = 0; i < self.num; i++) { //上一個點 self.data[i].x += self.data[i].cx; self.data[i].y += self.data[i].cy; //邊界值判斷 if(self.data[i].x > self.cW || self.data[i].x < 0) { self.data[i].cx = -self.data[i].cx } if(self.data[i].y > self.cH || self.data[i].y < 0) { self.data[i].cy = -self.data[i].cy } this.drawCircle(self.data[i].x, self.data[i].y); //用勾股定理判斷是否連線 for(var j = i + 1; j < self.num; j++) { //下一個點 if(Math.pow(self.data[i].x - self.data[j].x, 2) + Math.pow(self.data[i].y - self.data[j].y, 2) < 50 * 50) { self.drawLine(self.data[i].x, self.data[i].y, self.data[j].x, self.data[j].y); } } } } } var stayrry = new Stayrry(); //生成的例項化物件,new出來的物件可以呼叫原型上的方法\ stayrry.init(); setInterval(function() { stayrry.moveCircle(); }, 3) // canvas:基於原生js操控 // 1.可以取代頁面中大量生成dom節點的操作 // 2.大屏資料展示 // 3.遊戲 // 4.webgl/three.js基於canvas </script> </body> </html>