javascript - 减少 html Canvas 中所有像素的不透明度

Question

我想知道如何减少 html Canvas 中所有像素的 alpha。

我通过鼠标输入在 Canvas 上自由绘制线条，因此尝试重做一些预编程的形状对我来说不是解决方案。

目标是在图像上添加淡出效果，所以我尝试用这个函数来实现:

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 的不透明度将很容易降低包含的 Canvas 的不透明度。

如果您不希望整个 Canvas 褪色，将增加的透明度与 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>