我需要在background.png上设置一个边界，这样player.png就不能越过它或离开它。我使用了JS和HTML。其他一切都很好，请尽快回答。：(
这是我的代码：
Javascript：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var background = new Image();
background.src = "images/background.png";
background.onload = function() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
start();
}
var image = new Image();
var imageX = 0;
var imageY = 0;
function start(){
image.src = "images/player.png";
image.onload = function(){
imageX = 35;
imageY = 35;
ctx.drawImage(image, imageX, imageY);
};
}
document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(event){
event.preventDefault();
event.stopPropagation();
if (event.keyCode == 65) {
imageX -= 13;
} else if (event.keyCode == 87) {
imageY -= 13;
} else if (event.keyCode == 68) {
imageX += 13;
} else if (event.keyCode == 83) {
imageY += 13;
}
redraw();
}
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(image, imageX, imageY);
}
Html:
<!DOCTYPE html>
<html>
<head>
<title>blow shoot</title>
</head>
<body>
<canvas id= "myCanvas" width= "500" height= "250">
<script src="main.js"></script>
</canvas>
</body>
</html>
图像：
player.png
后台.png
您可以添加strokeRect函数：
ctx.strokeRect(x,y,w,h)
其中x，y是图像左上角的坐标，w，h是图像的尺寸。如果你想让它保持在外面，-1 on x,y+2 on w,h的每一边都有1px的偏移量。