html代碼

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、網(wǎng)站設(shè)計、成都做網(wǎng)站、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

<canvas id="canvas">您的瀏覽器不支持canvas</canvas>

css代碼

#canvas {
    background-color: cadetblue;
    display: block;
    overflow: hidden;
}

javascript代碼

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//畫布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//鼠標路徑
var mouseX = canvas.width / 2;
var mouseY = canvas.height / 2;
//瀏覽器窗口改變
window.onresize = function(){
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
}
//生成隨機數(shù)
function randomNum(x, y) {
  return Math.floor(Math.random() * (y - x + 1) + x);
}
    
// 創(chuàng)建小球?qū)ο?function Ball() {}
    
Ball.prototype = {
  // 初始化
  init: function(){
    this.r = randomNum(0.1, 3); // 小球半徑
    this.color = "#fff"; // 小球顏色
    // 隨機坐標軸
    this.x = randomNum(this.r, canvas.width - this.r); 
    this.y = randomNum(this.r, canvas.height - this.r);
    //隨機速度
    this.speedX = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
    this.speedY = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
  },
    
  move: function(){ // 小球移動
    this.x += this.speedX * 0.2; // x軸移動
    this.y += this.speedY * 0.2; // y軸移動
    
    // 左邊界
    if(this.x <= this.r) {
        this.x = this.r;
        // 反方向
        this.speedX *= -1;
    }
    // 右邊界
    if(this.x >= canvas.width - this.r) {
        this.x = canvas.width - this.r
        this.speedX *= -1;
    }
    //上邊界
    if(this.y <= this.r) {
        this.y = this.r;
        this.speedY *= -1;
    }
    //下邊界 
    if(this.y >= canvas.height - this.r) {
        this.y = canvas.height - this.r;
        this.speedY *= -1;
    }
  },
  draw: function(){ // 繪制小球
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}
    
var balls = []; // 小球盒子
for(var i = 0; i < 0.0002 * canvas.width * canvas.height; i++) {
  ball = new Ball(); // 實例化對象
  ball.init() // 初始化數(shù)據(jù)
  balls.push(ball);
}
    
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除畫布
  for(var i = 0; i < balls.length; i++) {
    balls[i].move(); // 小球移動
    balls[i].draw(); // 更新小球位置
    if(ball_to_mouse(balls[i]) < 130) { // 球體與鼠標距離-->畫線
    ctx.lineWidth = (130 - ball_to_mouse(balls[i])) * 1.5 / 130;
    ctx.beginPath();
    ctx.moveTo(balls[i].x, balls[i].y);
    ctx.lineTo(mouseX, mouseY);
    ctx.strokeStyle = balls[i].color;
    ctx.stroke();
  }
}
    
  for(var i = 0; i < balls.length; i++) {
    for(var j = 0; j < balls.length; j++) {
        if(ball_to_ball(balls[i], balls[j]) < 80) { // 球體之間距離-->畫線
            ctx.lineWidth = (80 - ball_to_ball(balls[i], balls[j])) * 0.6 / 80;
            // 線體透明
            ctx.globalAlpha = (130 - ball_to_ball(balls[i], balls[j])) * 1 / 80;  
            ctx.beginPath();
            ctx.moveTo(balls[i].x, balls[i].y);
            ctx.lineTo(balls[j].x, balls[j].y);
            ctx.strokeStyle = balls[i].color;
            ctx.stroke();
        }
    }
  }
    
  // 當前畫布透明度
  ctx.globalAlpha = 1.0;
    
}, 30);
//鼠標移動
canvas.|| window.event;
  mouseX = e.offsetX;
  mouseY = e.offsetY;
}
//鼠標跟每個點之間的距離
function ball_to_mouse(obj) {
  var disX = Math.abs(mouseX - obj.x);
  var disY = Math.abs(mouseY - obj.y);
  return Math.sqrt(disX * disX + disY * disY);
}
//兩點之間的距離
  function ball_to_ball(obj1, obj2) {
  var disX = Math.abs(obj1.x - obj2.x);
  var disY = Math.abs(obj1.y - obj2.y);
  return Math.sqrt(disX * disX + disY * disY);
}

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)頁標題：canvas連線動畫-創(chuàng)新互聯(lián)
標題路徑：http://www.rwnh.cn/article42/icoec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、移動網(wǎng)站建設(shè)、App設(shè)計、軟件開發(fā)、搜索引擎優(yōu)化、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)