透明背景不工作

Question

我正在用HTML和Javascript制作一个简单的小游戏，但我遇到了一个错误。我在“画布”上制作的精灵无法到达画布边界（游戏世界的边缘）。看了很多之后，我推断出它不是代码，而是图像背景不透明的事实。但这没有任何意义，因为图像文件确实具有透明背景。

我怎样才能彻底摆脱背景？或者是代码中的某些东西导致精灵拥有它自己的边界？

图片文件：

运行时的样子

http://prntscr.com/4btb32

代码：

// JavaScript Document

var canvasWidth = 800;
var canvasHeight = 600;

$('#gameCanvas').attr('width', canvasWidth);
$('#gameCanvas').attr('height', canvasHeight);

var keysDown = {};

$('body').bind('keydown', function(e){
 keysDown[e.which] = true;
});

 $('body').bind('keyup', function(e){
 keysDown[e.which] = false;
});

var canvas = $('#gameCanvas')[0].getContext('2d');
var FPS = 30;
var image = new Image();
image.src = "ship.png";

var playerX = (canvasWidth/2) - (image.width/2);
var playerY = (canvasHeight/2) - (image.height/2);

setInterval(function() {
update();
draw();
}, 1000/FPS);

function update(){
if(keysDown[37]){
    playerX -= 10;
}
if(keysDown[38]){
    playerY -= 10;
}
if(keysDown[39]){
    playerX += 10;
}
if(keysDown[40]){
    playerY += 10;
}

playerX = clamp(playerX, 0, canvasWidth - image.width);
playerY = clamp(playerY, 0, canvasHeight - image.height);

}

function draw() {
canvas.clearRect(0,0, canvasWidth, canvasHeight);
canvas.strokeRect(0, 0, canvasWidth, canvasHeight);
canvas.drawImage(image, playerX, playerY);
}

function clamp(x, min, max){
return x < min ? min : (x > max ? max : x);

}

谢谢，

抗体

Answer 1

您的钳制功能正在使x和y值始终在0和画布大小减去图像大小之间。这使得您的图像永远不会离开画布（使整个图像始终在画布上），并且您的图像大小实际上比船图像大一些。图像的透明度与离开画布的船无关，它与尺寸有关。如果您希望能够让船离开画布，或者右边的边缘，则减小图像的大小，使其上没有边框。

另外，您可以将钳位功能钳位到0 - image.width和canvasWidth + image.width（或height）。这将使船舶完全从画布上消失。

Answer 2

精灵是否具有透明背景，图像的高度和宽度仍在使用中。你需要以船填充整个画布的方式创建你的精灵。

图像将与背景一样宽和高......所以你的船不会到达边缘，因为你的图像上仍有一个背景延伸到你的船外。