JavaScript Canvas实现兼容IE的兔子发射爆破动图特效攻略如下:
在开始编写代码之前,我们需要准备开发环境和必要的素材文件。具体如下:
首先我们需要实现发射兔子的动画效果。具体步骤如下:
<canvas id="canvas" width="800" height="600"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rabbitImg = new Image();
rabbitImg.src = "rabbit.png";
rabbitImg.onload = function() {
draw();
};
var x = 200;
var y = 400;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(rabbitImg, x, y, 100, 100);
x += 3;
if (x > canvas.width) {
x = 0;
}
requestAnimationFrame(draw);
}
至此,我们已经成功地实现了发射兔子的动画效果。
接下来,我们需要实现炮弹命中兔子后的爆炸效果。具体步骤如下:
var boomImg = new Image();
boomImg.src = "boom.png";
boomImg.onload = function() {
boomImg.style.display = "none";
};
document.body.appendChild(boomImg);
var x2 = 0;
var y2 = 400;
function draw() {
// ...
if (Math.abs(x - x2) < 50 && Math.abs(y - y2) < 50) {
boom(x, y);
x = 200;
}
}
function boom(x, y) {
boomImg.style.display = "block";
boomImg.style.left = x + "px";
boomImg.style.top = y + "px";
setTimeout(function() {
boomImg.style.display = "none";
}, 1000);
}
至此,我们已经成功地实现了兔子发射爆破动图特效,并且可以兼容IE浏览器。
示例说明:
requestAnimationFrame
方法来实现动画效果。该方法可以让动画在浏览器每一帧中进行绘制,从而达到更加流畅的效果。setTimeout
方法来实现图片的逐渐消失效果。该方法可以让指定函数在指定的时间后执行,从而实现延时操作。