bekommen die Zeichnung auf der Leinwand bleiben

Question

Ich machte eine Zeichnung auf Leinwand und Schaltflächen, um es nach oben, unten, links und rechts zu bewegen. Aber ich habe ein Problem damit zu versuchen, darüber nachzudenken, wie ich die Zeichnung nicht über die Grenzen der Leinwand bringen kann, wenn ich zu sehr auf die Richtungstasten klicke. Meine Leinwand ist 500 x 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

, wenn Sie es aus gehen vorbei an der Grenze stoppen wollen, müssen Sie einige x,y Variablen erhalten, die mit der Übersetzung ändern.

zum Beispiel, wenn Sie translate(0, 5) haben, sollten Sie davor haben. Auf diese Weise können Sie überprüfen, ob die x und y außerhalb der Grenzen sind, und verhindern, dass irgendetwas passiert, bevor die Übersetzung:

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) 
    ... 
} 

und für den Rest der Richtungs Funktionen, würden Sie brauchen, um alle Grenzen in die überprüfen if-Anweisung:

up: y - 5 <= 0

links: x - 5 <= 0

unten: y + 5 >= canvas5.height

rechts: x + 5 >= canvas5.width

Answer 2

Sie müssen Ihre aktuelle Position in einigen Variablen halten (z x und y). Verwenden Sie dann anstelle der aktuellen Transformationsmatrix mit translate die Methode setTransform. Dies ermöglicht es uns, die oft schlecht verwendete Methode save zu vermeiden und die Zeichenfläche bei jeder neuen Zeichnung einfach zu löschen.

Dann haben Sie bereits eine drawObject Methode, verwenden Sie es einfach.

und der Wand zu vermeiden, müssen Sie nur, wenn Sie außerhalb der Grenzen sind, wenn Ihre x und y Werte zu modifizieren (beachten Sie, dass Sie auch Dimensionen berücksichtigen Ihre Zeichnungen nehmen müssen, wenn diese Prüfung durchführen)

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>