画布fillRect高度和宽度总是倾斜/扭曲[重复]
Posted
技术标签:
【中文标题】画布fillRect高度和宽度总是倾斜/扭曲[重复]【英文标题】:Canvas fillRect height and width are always skewed/distorted [duplicate] 【发布时间】:2016-11-25 18:36:52 【问题描述】:我放在画布上的形状总是以某种方式扭曲。我不确定这是我的画布尺寸还是错误的代码。 (尽管如果它是糟糕的代码,现在可能已经修复了它)。这是我的代码:
<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 来调整你的画布大小”使用这个作为搜索词,你会找到你的解决方案。 【参考方案1】:您将画布的宽度和高度设置为 1000 像素,但随后将 css 宽度和高度设置为 100%。
画布仍为 1000*1000 像素,但 CSS 会缩放内容以匹配窗口的纵横比。
将画布想象成一幅图像。如果您调整图像大小,则图像会失真。
只需删除 CSS 样式。
【讨论】:
以上是关于画布fillRect高度和宽度总是倾斜/扭曲[重复]的主要内容,如果未能解决你的问题,请参考以下文章
Android ImageView 将较小的图像缩放到具有灵活高度的宽度,而不会裁剪或扭曲