使画布透明

Question

我的身体是这样的：

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

问题是，画布是白色的而不是透明的。 有没有一种方法可以使它透明，以便我可以将dna波放置在背景之上？

Codepen示例

Answer 1

默认情况下，画布是透明的。

尝试设置页面背景图像，然后在其上放置画布。 如果在画布上未绘制任何内容，则可以完全看到页面背景。

你应该试试

context.clearRect(0,0,width,height);

有关更多信息，请参见如何在html5中制作透明画布？

Answer 2

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

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

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

• 清除屏幕外上下文
• 在屏幕外的一个上绘制可见的画布，
• 清除可见的画布
• 将屏幕外的一个拖回可见的一个

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

 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>