透明背景不起作用
透明背景不起作用
提问于 2014-08-11 19:00:53
我正在用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);
}谢谢,
Ab
回答 2
Stack Overflow用户
发布于 2014-08-11 19:16:19
您的钳子功能是这样的，所以x和y值总是介于0和画布大小减去图像大小之间。这使得您的图像永远不会离开画布(使整个图像总是在画布上)，而且您的图像大小实际上比船只图像要大一些。图像的透明度与船只离开帆布无关，与大小有关。如果你想让船离开画布，或者直接靠近边缘，那么缩小图像的大小，使其没有边框。
或者，你可以让你的夹子功能夹到0- image.width和canvasWidth + image.width (或高度)。这将使船完全消失在画布上。
Stack Overflow用户
发布于 2014-08-11 19:27:07
无论精灵是否有透明的背景，图像的高度和宽度仍在使用中。您需要以这样一种方式创建您的精灵，即船填充您正在绘制它的整个画布。
这张照片会像你的背景一样宽高.所以你的船不会到达边缘，因为你的图像上仍然有一个背景延伸到你的船之外。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25250491
复制相关文章
相似问题
腾讯云开发者
