Форма, которую я положил на холст, всегда в какой-то степени искажена. Я не уверен, что это мои размеры холста или просто плохой код. (хотя, если бы это был плохой код, возможно, он бы исправил его к настоящему времени). Вот мой код:Холст fillRect высота и ширина всегда искажены/искажены
<script type = "text/javascript">
var game = document.getElementById("game");
//To keep the shapes from coming out with low resolution/a fuzzy look
game.height = 1000;
game.width = 1000;
var context = game.getContext("2d");
var gamePieces = []
function gamePiece(width, height, color, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
context.fillStyle = color;
context.fillRect(this.x, this.y, this.height, this.width);
}
this.move = function(distancex, distancey, leftOrRight, upOrDown){
if(leftOrRight.toLowerCase() == "left"){
this.x = this.x - distancex
} else if(leftOrRight.toLowerCase() == "right"){
this.x = this.x + distancex;
}
if(upOrDown.toLowerCase() == "up"){
this.y = this.y - distancey;
} else if(upOrDown.toLowerCase() == "down"){
this.y = this.y + distancey
}
}
gamePieces[gamePieces.length] = this
context.fillStyle = color;
context.fillRect(this.x, this.y, this.height, this.width);
}
function update(){
context.clearRect(0, 0, game.width, game.height);
for(var i = 0; i < gamePieces.length; i++){
gamePieces[i].update();
}
}
setInterval(update, 1);
var p1 = new gamePiece(100, 100, "blue", 0, 0);
</script>
А вот CSS для холста:
#game {
height: 100%;
width: 100%;
}
Я попытался изменить некоторые из размеров, она по-прежнему выходит так. Браузер, который я тестирую, это Chrome.
«не используйте css для изменения размера вашего холста» используйте это как поисковый запрос, вы найдете свое решение. – Kaiido