降低 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>

降低 html canvas 中所有像素的不透明度

Reduce opacity all pixels in a html canvas

html

javascript

canvas

html5-canvas