javascript游戏中的褪色图像
javascript游戏中的褪色图像
提问于 2013-10-03 13:35:21
我正在工作的Javascript，HTML画布为基础的游戏，我正在损害主要老板，他的图片变化。我想问一问是否有可能改变两张图片在JS与特殊效果-褪色。到目前为止，我还没有想出解决办法。
这里是图片的例子，我想要改变的效果。
我的代码看起来像这样
if(hp>7 && hp<15) this.boss.srcY = 520;
if(hp>=15 && hp <22) this.boss.srcY = 680;
if(hp>=22 && hp <30) this.boss.srcY = 840;
if(hp>=30 && hp <37) this.boss.srcY = 1000;
if(hp>=37 && hp <45) this.boss.srcY = 1200;
if(hp>=45 && hp <50) this.boss.srcY = 1365;代码的解释是-更多的点击(较少的HP)等于更多的损坏图片(5张不同的图片)。谢谢你帮忙！
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-03 15:33:00
你可以用画布在不同的褪色阶段创造你的飞机。
使用context.globalAlpha设置绘制图像的不透明度。
context.globalAlpha=0.50; // opacity at 50%
context.drawImage(yourPlane,0,0);性能注意事项:由于绘制预先存在的图像比应用效果然后绘图更快，您可以在不同的褪色阶段将您的飞机保存为图像。
var plane50percent=new Image();
plane50percent.src=canvas.toDataURL(); // image.onload omitted for brevity然后在不同的褪色阶段画出预先绘制的平面，以达到效果。
下面是代码和Fiddle：http://jsfiddle.net/m1erickson/v5TwY/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var fps = 60;
// image loader
var img=new Image();
img.onload=function(){
animate();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/b2.png";
function animate() {
setTimeout(function() {
requestAnimFrame(animate);
// set the current opacity
ctx.globalAlpha-=.02;
// draw the image
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,5,5);
if(ctx.globalAlpha<=0){ return; }
}, 1000 / fps);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=405 height=200></canvas>
</body>
</html> Stack Overflow用户
发布于 2013-10-03 13:38:30
我在另一个似乎和你的问题相似的问题上找到了这个答案。Javascript fade image in and out，它在一个循环中，但我认为您可以重写它以满足您的需要。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19160664
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号