使用HTML5 <canvas>元素，我想加载一个图像文件(PNG, JPEG等)，将其完全透明地绘制到画布上，然后将其淡入。我已经弄清楚如何加载图像并将其绘制到画布上，但我不知道如何改变其不透明度。
这是我到目前为止的代码:
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绘制具有不透明度的对象，然后将其设置为正常。
//////////////////////// 圆 /////////////////////// ctx。globalAlpha = 0.75; ctx.beginPath (); ctx。圆弧(x1, y1, r1, 0, Math.PI*2); ctx。fillStyle =颜色; ctx.fill (); ctx.closePath (); ctx。globalAlpha = 1;
我也在寻找这个问题的答案，(澄清，我想能够绘制一个图像与用户定义的不透明度，如如何绘制形状与不透明度)，如果你绘制原始形状，你可以设置填充和笔画颜色与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值。
你可以。透明画布可以通过使用目标输出全局合成操作快速褪色。它不是100%完美的，有时它会留下一些痕迹，但它可以调整，取决于什么需要(即使用'source-over'，用alpha为0.13的白色填充它，然后褪色以准备画布)。
// 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';
编辑:标记为“正确”的答案是不正确的。
这很容易做到。试试这段代码，把“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上用IE 9、FF 5、Safari 5和Chrome 12测试。
在画布上，我首先在一个自运行函数中绘制矩形0,0,canvas.width,canvas。高度作为画布的背景，我将globalAlpha设置为1 .然后我在自己的函数中绘制其他形状，并将其globalAlpha设置为0。无论数字是多少，它们都不会相互影响。
