Craftyjs png sprite 和自定义绘制图形的问题？答案

【问题标题】：Troubles with craftyjs png sprite and custom drawed figure?Craftyjs png sprite 和自定义绘制图形的问题？
【发布时间】：2013-12-24 12:04:47
【问题描述】：

我有以下带有最新 Craftyjs 的代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin:0;
        }
    </style>

    <script type="text/javascript" src="crafty.js"></script>
    <script>

        Crafty.c("Planet", {
            Planet: function(radius, map) {
                this.radius = radius;
                this.map = map;
                return this;
            },

            draw: function() {
                var ctx = Crafty.canvas.context;

                var x = 100;
                var y = 100;

                var offsetX = 0;

                var map = this.map;

                ctx.save();

                ctx.beginPath();
                ctx.arc(x, y, this.radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.clip();

                var scale = (this.radius * 2) / map.height;
                ctx.drawImage(map, 0, 0, map.width, map.height, x - this.radius - offsetX * scale, y - this.radius, map.width * scale, map.height * scale);

                ctx.beginPath();
                ctx.arc(x, y, this.radius * 1.04, Math.PI * 0.70, Math.PI * 1.30, false);
                ctx.shadowColor = "black";
                ctx.shadowBlur = 5;
                ctx.shadowOffsetX = 5;
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(x, y, this.radius * 1.04, -Math.PI * 0.30, Math.PI * 0.30, false);
                ctx.shadowColor = "black";
                ctx.shadowBlur = 5;
                ctx.shadowOffsetX = -5;
                ctx.stroke();

                ctx.restore();
                console.log('drawing');
            }
        });


        Game = {

          // Initialize and start our game
          start: function() {
            // Start crafty and set a background color so that we can see it's working
            Crafty.init(500,500);

            Crafty.scene('Game', function() {
                Crafty.load(["1.jpg", "ship.png"],
                    function() {
                        Crafty.sprite("ship.png", {player_spr:[0,0, 48,48]});

                        Crafty.background("url('space.jpg')");
                              Crafty.e("2D, Canvas, Planet")
                              .Planet(40, Crafty.asset('1.jpg'));

                              var b2d = Crafty.e("2D, Canvas, player_spr, Actor, Fourway")
                              .multiway({W: -90, S: 90, D: 0, A: 180})
                              .attr({z: 4});

                            Crafty.viewport.clampToEntities = false;

                            Crafty.viewport.follow(b2d,0,0);

                });
            });

            Crafty.scene('Game');

          }
        }

        window.onload = Game.start;
    </script>
</head>

<body>

</body>

</html>

纹理是：

文件：1.jpg

文件：ship.png

结果画布渲染图像：

这是一个奇怪的错误！我能用它做什么？狡猾的精灵与自定义绘图冲突......（它显示精灵透明度）

【问题讨论】：

合成操作好像出错了。
@Ken Fyrstenberg，如何解决这个问题？
别介意我 - 我刚刚注意到你正在使用引擎/库。可能有很多事情，包括内部持久性等。只是为了尝试，您可以在绘制船之前设置ctx.globalCompositeOperation = 'source-over'，但同样，因为它是一个可能不是一个好主意的引擎..

标签： javascript jquery canvas craftyjs

【解决方案1】：

CraftyJS Github 版本修复了这个问题！

只需用 grunt 编译。

感谢您的回答！

【讨论】：

CraftyJS 哪个版本有用？
没有。我刚刚下载了狡猾的 js 开发树：github.com/craftyjs/Crafty 并使用 npm grant 进行编译。确实比发布的版本更好:)