我想知道如何减少 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);
}
最佳答案
降低容器 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>
关于javascript - 降低 html Canvas 中所有像素的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31663581/