減少HTML畫布中所有像素的不透明度

Question

我想知道如何減少html畫布中所有像素的alpha。

我通過鼠標輸入在畫布上繪制自由線，因此嘗試重做一些預編程的形狀對我來說不是解決方案。

我們的目標是在圖像上添加一個淡出效果，因此我嘗試使用此功能來實現：

var canvas = document.getElementById('myCanvas');

context = canvas.getContext("2d");

var img  = context.getImageData(0, 0, canvas.width, canvas.height);
var alpha = 1.0;

while(alpha > 0){
  context.save();
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.globalAlpha = alpha;
  context.putImageData(img, 0, 0);
  context.restore();

  alpha = alpha - .01;
  console.log(alpha);
  img  = context.getImageData(0, 0, canvas.width, canvas.height);
}

Answer 1

減少容器div的不透明度將輕松地減少所包含畫布的不透明度。

如果您不希望整個畫布褪色，將增加的透明度與globalAlpha與copy合成結合使用可能會很有用。 通過copy合成，您可以重新繪制現有的自定義圖形，而無需使用非常昂貴的putImageData 。

示例代碼和演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var alpha=1.00; var img=new Image(); img.onload=start; img.src="https://source.unsplash.com/random/300x300"; function start(){ ctx.drawImage(img,0,0); } function fade(decrement){ alpha-=decrement if(alpha<0.01){ctx.clearRect(0,0,canvas.width,canvas.height);return} ctx.globalAlpha=alpha; ctx.globalCompositeOperation='copy'; ctx.drawImage(canvas,0,0,img.width,img.height,0,0,img.width,img.height); ctx.globalAlpha=1.00; ctx.globalCompositeOperation='source-over'; } $('#go').click(function(){ fade(0.10); }); $('#fadeit').click(function(){ requestAnimationFrame(animateFadeOut); }); function animateFadeOut(){ fade(0.01); if(alpha>0.00){requestAnimationFrame(animateFadeOut);} } 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id=go>Repeatedly click to fade out the image</button> <br> <button id=fadeit>Animate a fadeout</button> <br> <canvas id="canvas" width=300 height=300></canvas>