糟糕的画布背景

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