javascript - 使 Canvas 透明

Question

这是我的 body :

body
{
    background-image:url('../images/bg.png');
    background-repeat:no-repeat;
    background-size:fixed 100vw;
    background-position:center;
}

问题是 Canvas 是白色的而不是透明的。有没有办法让它透明，这样我就可以将 dna 波放在背景之上？

Codepen example

Answer 1

一种简单的方法是使用屏幕外 Canvas 。

首先将其上下文的 globalAlpha 值设置为 0 到 1 之间的某个值，这将决定您之前的绘图消失的速度。

然后，在动画循环中，在绘制新图之前，

• 清除屏幕外上下文，
• 在离屏 Canvas 上绘制可见 Canvas ，
• 清除可见 Canvas
• 把屏幕外的画在可见的画上

在此过程中，您的图像将失去不透明度。

var clear = function(){
 // clear the clone canvas  
 cloneCtx.clearRect(0,0,canvasWidth, canvasHeight)
 // this should be needed at init and when canvas is resized but for demo I leave it here
 cloneCtx.globalAlpha = '.8';
 // draw ou visible canvas, a bit less opaque
 cloneCtx.drawImage(context.canvas, 0,0)
 // clear the visible canvas
 context.clearRect(0,0,canvasWidth, canvasHeight)
 // draw back our saved less-opaque image
 context.drawImage(clone, 0,0)
}

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    // create an offscreen clone
    clone = canvas.cloneNode(),    
    cloneCtx = clone.getContext('2d'),
    
    canvasWidth = canvas.width =
    clone.width =window.innerWidth,
    canvasHeight = canvas.height = clone.height = window.innerHeight,
    globalTick = 0,
    points = [],
    pointCount = 12,
    pointSpeed = 6,
    spacing = canvasWidth / pointCount,
    pointCount = pointCount + 2,    
    verticalPointRange = 60,
    randomRange = function(min, max){
        return Math.floor( (Math.random() * (max - min + 1) ) + min);
    },
    iPath,
    iPoints;  

var Point = function(x, y, alt){
  this.x = x;  
  this.y = y;
  this.yStart = y;
  this.alt = alt;  
}
    
Point.prototype.update = function(i){
  var range = (this.alt) ? verticalPointRange : -verticalPointRange;
  this.x += pointSpeed;
  this.y = (this.yStart) + Math.sin(globalTick/14) * -range;
  
  if(this.x > (canvasWidth + spacing)){
    this.x = -spacing;
    var moved = points.splice(i, 1);
    points.unshift(moved[0]);
  }
}
     
var updatePoints = function(){
  var i = points.length;
  while(i--){
    points[i].update(i);         
  }
}
              
for(iPoints = 0; iPoints < pointCount; iPoints++){
  var alt = (iPoints % 2 === 0);
  var offset = (alt) ? verticalPointRange : -verticalPointRange;
  points.push(new Point(spacing * (iPoints-1), canvasHeight/2, alt));  
}

var renderPath = function(){
  context.beginPath();
  context.moveTo(points[0].x, points[0].y);
  for(iPath = 1; iPath < pointCount; iPath++){
    context.lineTo(points[iPath].x, points[iPath].y);
  }
  context.stroke();  
}
                    
var loop = function(){
  requestAnimationFrame(loop, canvas);
  clear();
  updatePoints();
  renderPath();
  globalTick++;
};

loop();

canvas { display: block; }
body{
  background-color: ivory;
}

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