javascript - 错误的 Canvas 上下文

Question

我目前正在制作 Canvas 动画，效果非常好。

您可以查看下面我的代码:

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>

我有一个函数 line() ，它计算每个圆之间的空间并在它们之间画线。在这个函数中，我把这个:

 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