0
キャンバスに貼った形は、常に何らかの形で歪んでいます。キャンバスディメンションか悪いコードなのかどうかはわかりません。 (それが悪いコードであったとしても、おそらくこれで解決しているはずです)。ここに私のコードは次のとおりです。キャンバスの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