使用 HTML5 <canvas>
元素,我想加载一个图像文件(PNG,JPEG等),将其完全透明地绘制到 Canvas 上,然后将其淡入。我已经弄清楚如何加载图像并将其绘制到 Canvas 上,但是我不知道如何改变它的不透明度。
这是我目前的代码:
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var c = canvas.getContext('2d');
c.globalAlpha = 0;
var img = new Image();
img.onload = function() {
c.drawImage(img, 0, 0);
}
img.src = 'image.jpg';
}
是否有人请我指出正确的方向,例如要设置的属性或要调用的函数来改变不透明度?
最佳答案
我也在寻找这个问题的答案,(澄清一下,我希望能够绘制具有用户定义的不透明度的图像,例如如何绘制具有不透明度的形状)如果您使用可以设置的原始形状进行绘制使用 alpha 填充和描边颜色以定义透明度。据我现在得出的结论,这似乎不会影响图像绘制。
//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
我已经得出结论,设置 globalCompositeOperation
适用于图像。
//works with images
ctx.globalCompositeOperation = "lighter";
我想知道是否有第三种设置颜色的方法,以便我们可以轻松地为图像着色并使其透明。
编辑:
经过进一步挖掘,我得出结论,您可以在绘制图像之前通过设置 globalAlpha
参数来设置图像的透明度:
//works with images
ctx.globalAlpha = 0.5
如果你想随着时间的推移实现淡化效果,你需要某种改变 alpha 值的循环,这相当容易,实现它的一种方法是 setTimeout
函数,查看创建一个循环,您可以从该循环中随时间改变 alpha。
https://stackoverflow.com/questions/2359537/