HTML Canvas：如何设置边框限制？ [英] HTML Canvas: How Do I Set Border Restrictions?
本文介绍了HTML Canvas：如何设置边框限制？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个程序，可以使用 w ， a ， s 和 d 键。我很难弄清楚如何让这个块不超出画布的边界，并且仅限于留在其中。
I have created a program that can move a rectangular block up, down, right, and left within a canvas using the w, a, s and d keys. I am having difficulty figuring out how to have the block not go beyond the borders of the canvas and be restricted only to stay within it.
这是我的代码的一部分对于画布：
Here is the part of my code for the canvas:
<html>
<head>
<script>
var positionX=0;
var positionY=0;
window.addEventListener("keydown", onKeyPress, true);
function draw(){
var canvas=document.getElementById("canvas_c");
var context=canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle="green";
context.fillRect(positionX, positionY, 100, 100);
context.strokeStyle = 'black';
context.stroke();
}
function onKeyPress(e){
if (e.keyCode==87){
positionY-=15;
}
if (e.keyCode==83){
positionY+=15;
}
if (e.keyCode==68){
positionX+=50;
}
if (e.keyCode==65){
positionX-=50;
}
draw();
}
</script>
</head>
<body>
<div id="firstDiv">
<canvas id="canvas_c" width="1000" height="500" style="border: 1px solid black;"> </canvas>
</div>
</body>
推荐答案
这里是用于基本边界运动函数的伪代码：
Here is pseudo-code for the basic boundary respecting movement functions:
// assuming this block object: var block={x:10,y:10,width:20,y:20};
function goLeft(){ if(block.x>0){block.x--;} }
function goUp(){ if(block.y>0){block.y--;} }
function goRight(){ if(block.x<(canvas.width-block.width)){block.x++;} }
function goDown(){ if(block.y<(canvas.height-block.height)){block.y++;} }
：这里的代码基于您添加到您的问题的代码]
警告：未经测试的代码...可能需要调整！ ： - ）
// save the canvas width & height at the top of the app
var canvas=document.getElementById("canvas1");
var cw=canvas.width;
var ch=canvas.height;
function onKeyPress(e){
if (e.keyCode==87){
positionY=Math.max(0,positionY-15);
}
if (e.keyCode==83){
positionY=Math.min(cw-100,positionY+15);
}
if (e.keyCode==68){
positionX=Math.min(ch-100,positionX+50);
}
if (e.keyCode==65){
positionX=Math.max(0,positionX-50);
}
draw();
}
这篇关于HTML Canvas：如何设置边框限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
