糟糕的畫布背景

Question

我目前正在製作一個畫布動畫，效果很好。

你可以看看下面我的代碼：

var canvas = document.getElementById('bubble'), 
 
    ctx = canvas.getContext('2d'); 
 
ctx.save(); 
 

 
var wW = canvas.width = window.innerWidth, 
 
    wH = canvas.height = window.innerHeight; 
 

 
var particles = []; 
 
var particleIndex = 0; 
 
var dx = dy = distance = 0; 
 

 
function Particle(){ 
 
    this.x = Math.random() * wW; 
 
    this.y = Math.random() * wH; 
 
    this.rad = 20; 
 
    this.color = "blue"; 
 
    this.vX = Math.random() * (1.01 - (-1)) + (-1); 
 
    this.vY = Math.random() * (1.01 - (-1)) + (-1); 
 
    particles[particleIndex] = this; 
 
    particleIndex++; 
 
} 
 
    
 
Particle.prototype.draw = function(){ 
 
    this.x += this.vX; 
 
    this.y += this.vY; 
 
    
 
    this.collision(); 
 
    
 
    //outer 
 
    ctx.beginPath(); 
 
    ctx.arc(this.x, this.y, this.rad, 0, Math.PI * 2); 
 
    ctx.stroke(); 
 
    
 
    //center 
 
    ctx.beginPath(); 
 
    ctx.arc(this.x, this.y, this.rad/10, 0, Math.PI * 2); 
 
    ctx.fillStyle="red"; 
 
    ctx.fill(); 
 
} 
 

 
Particle.prototype.collision = function(){ 
 
if(this.x + this.rad >= wW || this.x - this.rad <= 0){ 
 
    this.vX *= -1; 
 
} 
 
    
 
if(this.y + this.rad >= wH || this.y - this.rad <= 0){ 
 
    this.vY *= -1; 
 
} 
 
    
 
} 
 

 
function line(){ 
 
    for(var i=0; i < particles.length; i++){ 
 
    for(var j=0; j < particles.length; j++){ 
 
     dx = particles[i].x - particles[j].x; 
 
     dy = particles[i].y - particles[j].y; 
 
     distance = Math.sqrt(dx * dx + dy * dy); 
 

 
     if(distance <= 60){   
 
     ctx.beginPath(); 
 
     ctx.moveTo(particles[i].x, particles[i].y); 
 
     ctx.lineTo(particles[j].x, particles[j].y); 
 
     ctx.strokeStyle="rgba(0,0,0,"+ 6/distance +")"; 
 
     ctx.stroke(); 
 
     } 
 
    } 
 
    } 
 
} 
 
    
 
for(var i=0; i<20; i++){ 
 
    new Particle(); 
 
} 
 

 
function anim(){ 
 
    requestAnimationFrame(anim); 
 
    ctx.clearRect(0,0,wW,wH); 
 
    
 
    line(); 
 
    
 
    for(var i=0; i < particles.length; i++){ 
 
    particles[i].draw(); 
 
    } 
 
} 
 

 
anim();

html, body{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
body{ 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow:hidden; 
 
}

<canvas id="bubble"></canvas>

我有一個函數線（），計算每圈之間的空間以及它們之間畫線。 在此功能，我把這個：

ctx.strokeStyle="rgba(0,0,0,"+ 6/distance +")"; 

我想換行不透明度爲距離的函數。但是，它會改變圓形不透明度而不是線條。我不明白爲什麼，我試圖恢復上下文，但它沒有工作..

謝謝！

Answer 1

您可以將其存儲到一個變量開始畫線之前，並恢復它之後

function line() { 
    var originalStrokeStyle = ctx.strokeStyle; 
    for (var i = 0; i < particles.length; i++) { 
    for (var j = 0; j < particles.length; j++) { 
     dx = particles[i].x - particles[j].x; 
     dy = particles[i].y - particles[j].y; 
     distance = Math.sqrt(dx * dx + dy * dy); 

     if (distance <= 60) { 
      ctx.beginPath(); 
      ctx.moveTo(particles[i].x, particles[i].y); 
      ctx.lineTo(particles[j].x, particles[j].y); 
      ctx.strokeStyle = "rgba(0,0,0," + 6/distance + ")"; 
      ctx.stroke(); 
     } 
    } 
    } 
    ctx.strokeStyle = originalStrokeStyle; 
} 

更新演示在http://codepen.io/gpetrioli/pen/aBZpXJ