получение рисунка на холсте

Question

Я сделал рисунок на холсте и кнопках, чтобы переместить его вверх, вниз, влево и вправо. Но у меня возникла проблема с попыткой придумать, как заставить рисунок не пропускать границы холста, если я слишком сильно нажимаю кнопки направления. Мой холст 500 х 500.

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

function drawObject(ctx, x, y) { 
ctx.save(); 
ctx.beginPath(); //Head of ship 
ctx.translate(x, y); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 
drawObject(ctx, 200, 225); 

function up() { 
var canvas2 = document.getElementById("myCanvas"); 
ctx.beginPath(); //Head of ship 
ctx.clearRect(-10, -15, 500, 500); 
ctx.translate(0, -40); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 

function right() { 
var canvas3 = document.getElementById("myCanvas"); 
ctx.beginPath(); 
ctx.clearRect(-10, -15, 500, 500); 
ctx.translate(5, 0); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 

function down() { 
var canvas4 = document.getElementById("myCanvas"); 
ctx.beginPath(); 
ctx.clearRect(-10, -15, 500, 500); 
ctx.translate(0, 5); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 

function left() { 
var canvas5 = document.getElementById("myCanvas"); 
ctx.beginPath(); 
ctx.clearRect(-10, -15, 500, 500); 
ctx.translate(-5, 0); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 

function reset() { 
var canvas5 = document.getElementById("myCanvas"); 
ctx.beginPath(); 
ctx.clearRect(-10, -15, 500, 500); 
ctx.restore(); 
ctx.save(); 
ctx.translate(200, 225); 
ctx.lineTo(0, 0); //starting point 
ctx.lineTo(0, 10); // left of head 
ctx.lineTo(15, 20); //connecting left to bottom 
ctx.lineTo(50, 20); // bottom of head 
ctx.lineTo(65, 10); // connecting bottom to right 
ctx.lineTo(65, 0); //line on far right 
ctx.lineTo(50, -10); //top of head 
ctx.lineTo(15, -10); //connecting top to left 
ctx.lineTo(0, 0); 
ctx.stroke(); 
} 

Answer 1

, если вы хотите, чтобы остановить его от идти мимо границы, вам необходимо получить некоторые x,y переменные, которые изменяются с переводом.

например, всякий раз, когда у вас есть translate(0, 5), перед вами должно быть x += 0; y += 5. Таким образом, вы можете проверить, является ли x и y находятся вне границ, и не допустить ничего не происходило до перевода:

function left(){ 
    ... 
    if(x - 5 <= 0) 
     return false 
    x -= 5; 
    // having y += 0 is redundant, but you can add it for readability purposes 
    translate(-5, 0) 
    ... 
} 

и для остальных функций поворота, вы должны проверить все границы в если заявление:

вверх: y - 5 <= 0

слева: x - 5 <= 0

вниз: y + 5 >= canvas5.height

право: x + 5 >= canvas5.width

Answer 2

Вы должны сохранить текущую позицию в некоторых переменных (например x и y). Затем вместо приращения текущей матрицы преобразования с translate используйте метод setTransform. Это позволит нам избежать часто плохо используемого метода save и легко очищать холст на каждом новом чертеже.

Затем у вас уже есть метод drawObject, просто используйте его.

И чтобы избежать стен, вы просто должны проверить, если вы находитесь вне границ при изменении ваших x и y значения (обратите внимание, что вы также должны принять во внимание ваших чертежей размеров при выполнении этой проверки)

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var defaultX, defaultY; // used in the reset function 
 
var x = defaultX = 200; 
 
var y = defaultY = 125; 
 

 
function drawObject(ctx, x, y) { 
 
    // reset the current transform so we can clear the canvas 
 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height) 
 
    // set the current transform to our actual position 
 
    ctx.setTransform(1, 0, 0, 1, x, y); 
 
    // draw our ship 
 
    ctx.beginPath(); //Head of ship 
 
    ctx.lineTo(0, 0); //starting point 
 
    ctx.lineTo(0, 10); // left of head 
 
    ctx.lineTo(15, 20); //connecting left to bottom 
 
    ctx.lineTo(50, 20); // bottom of head 
 
    ctx.lineTo(65, 10); // connecting bottom to right 
 
    ctx.lineTo(65, 0); //line on far right 
 
    ctx.lineTo(50, -10); //top of head 
 
    ctx.lineTo(15, -10); //connecting top to left 
 
    ctx.lineTo(0, 0); 
 
    ctx.stroke(); 
 
} 
 
drawObject(ctx, x, y); 
 

 
function up() { 
 
    y -= 5; 
 
    // we gone too far, stop it. 
 
    // -10 is your ship top position 
 
    if (y < 10) { 
 
    y = 10; 
 
    } 
 
    drawObject(ctx, x, y); 
 
} 
 

 
function right() { 
 
    x += 5; 
 
    // 65 is your ship width 
 
    if (x > canvas.width - 65) { 
 
    x = canvas.width - 65; 
 
    } 
 
    drawObject(ctx, x, y); 
 

 
} 
 

 
function down() { 
 
    y += 5; 
 
    // 20 is your ship height 
 
    if (y > canvas.height - 20) { 
 
    y = canvas.height - 20; 
 
    } 
 
    drawObject(ctx, x, y); 
 
} 
 

 
function left() { 
 
    x -= 5; 
 
    if (x < 0) { 
 
    x = 0; 
 
    } 
 
    drawObject(ctx, x, y); 
 

 
} 
 

 
function reset() { 
 
    x = defaultX; 
 
    y = defaultY; 
 
    drawObject(ctx, x, y); 
 
    } 
 
    // replacing your buttons with key events (arrows) 
 
window.onkeydown = function(event) { 
 
    switch (event.keyCode) { 
 
    // left 
 
    case 37: 
 
     event.preventDefault(); 
 
     left(); 
 
     break; 
 

 
     // up 
 
    case 38: 
 
     event.preventDefault(); 
 
     up(); 
 
     break; 
 

 
     // right 
 
    case 39: 
 
     event.preventDefault(); 
 
     right(); 
 
     break; 
 

 
     //down 
 
    case 40: 
 
     event.preventDefault(); 
 
     down(); 
 
     break; 
 
    } 
 
} 
 
document.getElementById('reset').onclick = reset;

button { 
 
    vertical-align: top; 
 
} 
 
canvas { 
 
    border: 1px solid; 
 
}

<canvas id="myCanvas" width="400" height="200"></canvas> 
 
<button id="reset"> 
 
    reset 
 
</button>