0

我正在开发基于 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张不同的图片）。感谢帮助！

4

2 回答 2

1

您可以使用画布在褪色的各个阶段创建平面。

在此处输入图像描述

使用 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

然后只需在褪色的各个阶段绘制预先绘制的平面即可获得效果。

这是代码和小提琴：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>
于 2013-10-03T15:33:00.033 回答
1

我在另一个与您的问题相似的问题上找到了这个答案。Javascript淡入淡出图像它在一个循环中，但我认为你可以重写它以满足你的需要。

于 2013-10-03T13:38:30.230 回答