HTML5 Canvas : 캔버스 가장자리 주위에 도형 그리기

Question

캔버스의 임의 위치에서 사각형을 그립니 다.하지만 모양이 캔바스 경계를 ​​벗어나기 때문에 모양이 잘리는 경우가 있습니다. 캔버스의 다른면에 정사각형을 그려 넣을 수있는 방법을 설명 할 수 있습니까 (asteroids에서와 비슷합니다). 내가 찾은 검색은 도움이되지 못했습니다. 어떤 도움을 주셔서 감사합니다.

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이 좋지 않습니다.