Сделать холст прозрачный

Question

Это то, что мое тело выглядит следующим образом:

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

Проблема есть, холст белого цвета вместо того, чтобы быть прозрачным. Есть ли способ сделать его прозрачным, чтобы я мог разместить dna wave поверх фона?

Codepen example

Answer 1

один простой способ, как с помощью закадрового холст.

Сначала установите значение 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>

Answer 2

Полотна прозрачны по умолчанию.

Попробуйте установить фоновое изображение страницы, а затем поместите над ним холст. Если на холсте ничего не нарисовано, вы можете полностью увидеть фон страницы.

вы должны попробовать

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

больше вы можете обратиться How do I make a transparent canvas in html5?