javascript - 让绘图留在 Canvas 上

Question

我在 Canvas 上画了一幅画，并用按钮将它向上、向下、向左和向右移动。但是我在考虑如何让绘图不通过 Canvas 的边界时遇到问题，如果我过多地单击方向按钮。我的 Canvas 是 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

如果你想阻止它越过边界，你需要得到一些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 )
    ...
}

对于其余的方向函数，您需要检查 if 语句中的所有边界:

向上:y - 5 <= 0

左:x - 5 <= 0

往下:y + 5 >= canvas5.height

右:x + 5 >= canvas5.width