작은 게임 엔진을 만들려고 할 때 문제가 빠르게 발생합니다. 작업중인 캔버스는 직사각형이 아래쪽 및 / 또는 오른쪽에 가까워지면 직사각형을 늘립니다. 나는 주위를 둘러 보았지만 같은 문제를 가진 다른 사람을 찾을 수없는 것 같습니다. 문제를 보여주기 위해 슬라이더 데모를 만들었습니다.
http://codepen.io/Magnesium/pen/wMwwgx
아래에 문제가있을 가능성이 가장 높은 코드를 포함하겠습니다.
var engine = function(canvas) { // Trying to make a game engine when the problems started
this.canvas = canvas.getContext("2d");
this.defaultColor = "#FF0000";
this.clearCanvas = function() { // Clears canvas
this.canvas.clearRect(0, 0, canvas.width, canvas.height);
};
this.square = function(x, y, size, color) { // Makes a square. I don't see any problems, but if the error is caused by me it would probably be here
if (color == undefined) color = this.defaultColor;
this.canvas.fillStyle = color;
this.canvas.fillRect(x, y, x + size, y + size);
};
}
그리고 그것을 사용하는 코드
setInterval(function() { // Called ~30 times a second
enjin.clearCanvas();
enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));
}, 30);
참고 :이 문제는 두 가지 이유로 캔버스의 CSS 크기 조정으로 인해 발생하지 않을 가능성이 큽니다. 그 중 하나는 캔버스 크기를 조정하는 데 CSS를 사용하지 않기 때문입니다.
fillRect의 매개 변수 3과 4는 좌표가 아니라 너비와 높이입니다.
this.canvas.fillRect(x, y, size, size);
https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/fillRect
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다