キャンバスに絵を残す

Question

キャンバスとボタンを使って図面を上下左右に動かしました。しかし、方向ボタンをクリックしすぎると、キャンバスの境界線を通過しないようにする方法を考えることに問題があります。私のキャンバスは、あなたが国境を越えて行くから、それを停止したい場合は、あなたが翻訳を変更するいくつかのx,yの変数を取得する必要があります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

です。

たとえば、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) 
    ... 
} 

と方向機能の残りのために、あなたはすべての境界をチェックする必要がありますif文：

アップ：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>