0
我想用html5-canvas做一些动画。我有背景,背景上的杯子,透明的这个杯子里的硬币。当杯子出现时,我想淡入淡出效果。我有一个问题,因为当我给马克杯的globalAlpha时,其余的都得到了相同的结果。我想要动画,在那里我可以为每个元素赋予淡入淡出效果。现在我有这样的:globalAlpha在画布上的一个图像
<body>
<canvas id="myCanvas" width="1600" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var background = new Image();
var money1 = new Image();
var money2 = new Image();
var money3 = new Image();
var money4 = new Image();
var money5 = new Image()
var mug = new Image();
var move = 0.01;
background.onload = function() {
context.drawImage(background, 0, 0);
}
mug.onload = function(){
context.globalAlpha = 0;
var i = 0;
var imgFadeInter = setInterval(function(){
context.globalAlpha += 0.01;
var a = context.drawImage(mug, 33, 212)
console.log(a, 'text');
i++;
if(i == 10){
clearInterval(imgFadeInter)
}
}, 10);
};
money1.onload = function() {
context.drawImage(money1, 155, 362);
};
money2.onload = function() {
context.drawImage(money2, 158, 360);
};
money3.onload = function() {
context.drawImage(money3, 151, 358);
};
money4.onload = function() {
context.drawImage(money4, 148, 301);
};
money5.onload = function() {
context.drawImage(money5, 136, 265);
};
background.src = 'background-mag.png';
setTimeout(function(){mug.src = 'mug.png'}, 500);
setTimeout(function(){money1.src = 'money1.png'}, 1000);
setTimeout(function(){money2.src = 'money2.png'}, 2000);
setTimeout(function(){money3.src = 'money3.png'}, 3000);
setTimeout(function(){money4.src = 'money4.png'}, 4000);
setTimeout(function(){money5.src = 'money5.png'}, 5000);
</script>
对不起,我的英语,我希望这是我写的是可以理解的..
我不认为我可以重置globalAlpha使用'= 1'非常感谢!但现在我明白了为什么它不好。在循环'imgFadeInter'我画10次杯子..我可以在这个循环(我必须有淡出效果)和drowImage摧毁杯子?我不能使用'context.clearRect',因为我在图像上有图像,当我使用它时,它会破坏另一个图像。 – Michal 2014-10-01 18:24:35
典型的画布工作流程是在需要进行更改时重新绘制整个场景:清除画布,重绘背景图像,重绘阿尔法马克杯等。或者,您可以将第二个临时画布直接放置在主画布上(使用CSS位置:绝对)。然后,您可以根据需要“clearRect”,而不会打扰主画布上的图像。 ;-) – markE 2014-10-01 18:34:32
非常感谢,这对我非常有用! – Michal 2014-10-01 18:38:56