javascript - HTML5 Canvas：在画布边缘绘制形状

Question

我正在创建一个基本游戏，它在画布上的随机位置绘制正方形，但有时形状会被切断，因为它超出了画布的边界。谁能解释我如何才能在画布的另一侧绘制正方形（类似于在小行星中的绘制方式）？我提出的搜索没有帮助。任何帮助表示赞赏。

Answer 1

好的，我想我已经解决了这个问题。基本上，这段代码只在画布内绘制正方形，如果它离开画布，它会检查它离开的边界并更新位置。需要循环变量，因为否则正方形将始终离开画布。

var canvas = document.getElementById('bg');
var ctx = canvas.getContext('2d');

var squares = [];
squares[squares.length] = new Square(200, 200, 20, 'red', 0.785398164);

function Square(x, y, size, colour, angle)
{
    this.x = x;
    this.y = y;
    this.size = size;
    this.colour = colour;
    this.speed = 5;
    this.angle = angle;
    this.looped = false;
}

Square.prototype.update = function()
{
    this.x += (Math.cos(this.angle) * this.speed);
    this.y += (Math.sin(this.angle) * this.speed);
    if (this.x < canvas.width && this.x + this.size > 0 &&
        this.y < canvas.height && this.y + this.size > 0)
    {
        this.draw();
        this.looped = false;
    }
    else
    {
        if (this.x > canvas.width && !this.looped)
        {
            this.x = -this.size;
        }
        if (this.x + this.size < 0 && !this.looped)
        {
            this.x = this.size + canvas.width;
        }
        if (this.y > canvas.height && !this.looped)
        {
            this.y = -this.size;
        }
        if (this.y + this.size < 0 && !this.looped)
        {
            this.y = this.size + canvas.height;
        }
        this.looped = true;
    }
}

Square.prototype.draw = function()
{
    ctx.fillStyle = this.colour;
    ctx.fillRect(this.x, this.y, this.size, this.size);
}

function gameLoop()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < squares.length; i++)
    {
        squares[i].update();
    }
    requestAnimationFrame(gameLoop);
}

gameLoop();

(function()
{
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
    {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
    {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function()
        {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
    {
        clearTimeout(id);
    };
}());

我会做一个 JSFiddle，但 requestAnimationFrame 不能很好地配合它。