如何在canvas元素被绘制后改变元素的不透明度（alpha，透明度）？
使用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 canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";
我已经得出结论，设置globalCompositeOperation与图像工作。
//works with images canvas2d.globalCompositeOperation = "lighter";
我想知道是否有某种设置颜色的第三种方式，以便我们可以轻松地将图像着色并使其透明。
编辑：
进一步挖掘后，我已经得出结论，您可以通过设置globalAlpha参数之前，您绘制图像设置图像的透明度：
//works with images ctx.globalAlpha = 0.5
如果你想随着时间的推移达到渐变的效果，你需要一些可以改变alpha值的循环，这很简单，实现它的一个方法就是setTimeout函数，看起来就是创build一个循环来改变alpha随着时间的推移。
使用globalAlpha一些更简单的示例代码：
ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(img, x, y); ctx.restore();
如果你需要加载img ：
var img = new Image(); img.onload = function() { ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(img, x, y); ctx.restore() }; img.src = "http://...";
笔记：
-
最后设置
'src'，以确保在所有平台上onload处理程序，即使图像已经在caching中。 -
将
save和restore（实际上使用它们很多）之类的东西包含在globalAlpha，以确保不会从其他地方打开设置，尤其是在绘制代码位将从事件中调用时。
编辑： 标记为“正确”的答案是不正确的。
这很容易做到。 试试这个代码，把你的图片换成“ie.jpg”
<!DOCTYPE HTML> <html> <head> <script> var canvas; var context; var ga = 0.0; var timerId = 0; function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); timerId = setInterval("fadeIn()", 100); } function fadeIn() { context.clearRect(0,0, canvas.width,canvas.height); context.globalAlpha = ga; var ie = new Image(); ie.onload = function() { context.drawImage(ie, 0, 0, 100, 100); }; ie.src = "ie.jpg"; ga = ga + 0.1; if (ga > 1.0) { goingUp = false; clearInterval(timerId); } } </script> </head> <body onload="init()"> <canvas height="200" width="300" id="myCanvas"></canvas> </body> </html>
关键是globalAlpha属性。
在Win7上testingIE 9，FF 5，Safari 5和Chrome 12。
这个post到目前为止我会去我的build议。 build议基于canvas 2d上下文中的像素操作。 来自MDN：
您可以在字体级别直接操作canvas中的像素数据
为了操作像素，我们将在这里使用两个函数 – getImageData和putImageData
getImageData函数的用法：
var myImageData = context.getImageData（left，top，width，height）;
和putImageData语法：
context.putImageData（myImageData，dx，dy）; // dx，dy – x和y在您的canvas上的偏移量
上下文是您的canvas2D上下文
所以要获得红绿蓝和alpha值，我们将执行以下操作：
var r = imageData.data[((x*(imageData.width*4)) + (y*4))]; var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1]; var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2]; var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];
其中x是x偏移量， y是在canvas上的y偏移量
所以我们让代码制作图像是半透明的
var canvas = document.getElementById('myCanvas'); var c = canvas.getContext('2d'); var img = new Image(); img.onload = function() { c.drawImage(img, 0, 0); var ImageData = c.getImageData(0,0,img.width,img.height); for(var i=0;i<img.height;i++) for(var j=0;j<img.width;j++) ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255] c.putImageData(ImageData,0,0);//put image data back } img.src = 'image.jpg';
你可以让你自己的“着色器” – 在这里看到完整的MDN文章
您可以。 透明canvas可以通过使用目标输出全局复合操作快速淡化。 它不是100％完美的，有时它留下一些痕迹，但可以调整，取决于需要什么（即使用“源代码”，并填充白色与阿尔法在0.13，然后淡出准备canvas）。
// Fill canvas using 'destination-out' and alpha at 0.05 ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = "rgba(255, 255, 255, 0.05)"; ctx.beginPath(); ctx.fillRect(0, 0, width, height); ctx.fill(); // Set the default mode. ctx.globalCompositeOperation = 'source-over';
如果使用jCanvas库，则可以在绘制时使用不透明属性。 如果您需要淡入淡出效果，只需重新绘制不同的值。
你不能。 这是直接模式的graphics。 但是你可以通过在不透明的背景颜色上画一个矩形来模拟它。
如果图像不是一个常量的颜色，那么它会变得相当麻烦。 在这种情况下，您应该可以使用像素操作方法。 只需在绘制图像之前保存该区域，然后再将其混合在顶部。
