我有以下带有最新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
文件：船.png
结果画布渲染图像：
这是一个奇怪的错误！我能用它做什么？狡猾的精灵与自定义图纸冲突......（它显示精灵透明度）