画布扭曲图画。如何获得设置大小和样式大小之间的缩放因子？ [英] Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

问题描述

我有这个画布：

<canvas id="game" width="280" height="280"></canvas>

css通过以下方式创建canvas：

The css styles the canvas via:

canvas
{
    width: inherit;
    height: 280px;
}

随着宽度可以改变，画布扭曲了图形。

推荐答案

这是同样的问题Mozilla Bespin团队遇到了。 （当他们使用Canvas时，在它与Ace合并之前）

This is the same problem that the Mozilla Bespin team ran into. (back when they were using Canvas, before it merged with Ace)

不要给Canvas任何CSS宽度/高度规则。 Doing所以通常最终作为一种痛苦。将画布放在只有一个东西的div中（画布本身）

Don't give the Canvas any CSS width/height rules. Doing so usually ends up as a pain. Put the Canvas in a Div that only has a single thing in it (the canvas itself)

当canvas-parent div改变大小时，改变画布的大小canvas.width和canvas.height）以匹配div的大小。

As the canvas-parent div changes size, change the size of the canvas (canvas.width and canvas.height) to match the size of the div.

由于大多数浏览器在div更改大小时不会触发事件，因此您只需要用一个定时器检查，例如每半秒钟，看看div是否改变了大小。如果有，则相应地调整画布大小。

Since most browsers do not fire an event when a div changes size, you'll simply have to check, say, every half second with a timer to see if the div has changed size. If it has, then you resize the canvas accordingly.

这篇关于画布扭曲图画。如何获得设置大小和样式大小之间的缩放因子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！