Canvas объект выходит за пределы поля

[Martyna]

Здравствуйте! Подскажите, пожалуйста, что сделать, чтобы объект не выходил за пределы canvas?

window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
 
var rec = new Object();
rec.x = 0;
rec.y = 0;
rec.moveright = function(){ rec.x++;}
rec.moveleft = function(){ rec.x--;}
rec.moveup = function(){ rec.y--;}
rec.movedown = function(){ rec.y++;}
rec.draw = function() {
    
    ctx.beginPath();
    ctx.clearRect(0,0,500,500);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(rec.x,rec.y,150,75);
    ctx.closePath();
}

 
document.onkeydown = function(e) {
//alert(e.keyCode);
if (e.keyCode == "37")
{
    
    rec.moveleft();
    rec.draw();
}

 
if (e.keyCode == "38")
{
	
	rec.moveup();
	rec.draw();
   
}
 
if (e.keyCode == "39")
{
	
    rec.moveright();
    rec.draw();
   
}
 
if (e.keyCode == "40")
{
	
    rec.movedown();
    rec.draw();
  
}
}


};

[warren buffet]

То и сделать, не выпускать за пределы.

[Martyna]

не выпускала бы, если б знала как может подскажете?

[Яростный Меч]

в методах move*** проверять, что объект не выскочит за пределы. Если выскочит, не менять икс или игрек.

[Martyna]

Спасибо большое за помощь!

[warren buffet]

Допустим ширина канваса 500

var w=500;

Откуда-то валится 600 в координату Y. Тогда на выводе:

y = Math.min(y,w);

Таким образом y никогда не будет больше w. Если "объект" больше пиксела, то из w еще надо вычесть его ширину.

obj.y = Math.min(obj.y,w-obj.w);

Наверно так, я с арифметикой не дружу.

[Rise]

Martyna, как уже сказали Math.min() и Math.max() в методах move***, плюс ширина, высота, шаг, цвет есть свойства объекта, плюс e.keyCode не рекомендуется

<canvas width="200" height="100" id="myCanvas" style="border: 1px solid red"></canvas>
<script>
var canvas  = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var rec = {};
	rec.x = 10;
	rec.y = 10;
	rec.width = 50;
	rec.height = 25;
	rec.step = 5;
	rec.color = 'red';
	rec.moveup = function () {
		this.y = Math.max(this.y - this.step, 0);
	};
	rec.movedown = function () {
		this.y = Math.min(this.y + this.step, canvas.height - this.height);
	};
	rec.moveleft = function () {
		this.x = Math.max(this.x - this.step, 0);
	};
	rec.moveright = function () {
		this.x = Math.min(this.x + this.step, canvas.width - this.width);
	};
	rec.draw = function () {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	};
	rec.draw();
	document.onkeydown = function (e) {
			 if (e.code == 'ArrowUp')    rec.moveup();
		else if (e.code == 'ArrowDown')  rec.movedown();
		else if (e.code == 'ArrowLeft')  rec.moveleft();
		else if (e.code == 'ArrowRight') rec.moveright();
		else return;
		rec.draw();
	};
</script>

[Martyna]

Огромное спасибо за помощь!

[Яростный Меч]

e.code в IE не поддерживается

[Rise]

Яростный Меч, держи полифилл

try {
	'code' in KeyboardEvent.prototype || Object.defineProperty(KeyboardEvent.prototype, 'code', {
		get: function () { return { 37: 'ArrowLeft', 38: 'ArrowUp', 39: 'ArrowRight', 40: 'ArrowDown' }[this.keyCode] }
	})
} catch (e) {}