使用静态分辨率缩放画布元素答案

【问题标题】：Scaling canvas element with static resolution使用静态分辨率缩放画布元素
【发布时间】：2012-04-02 06:47:56
【问题描述】：

我有画布元素，我想缩小它，但不改变它的 js 逻辑。 js 中的绘图空间应始终为 600x300px，即使它在 HTML 中显示为 300x150px。我知道，我可以用静态分辨率调整图像大小，但我可以用画布做同样的事情吗？

【问题讨论】：

【解决方案1】：

使用 CSS 更改大小会缩放它

所以基本上你可以通过 width 和 height 属性设置它的大小来绘制对象等

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 300;

然后使用 css 更改其显示大小

#canvas{
   width: 300px;
   height: 150px; 
}

【讨论】：

【解决方案2】：

Loktar 有一种方法，即使用 CSS，但这可能会使某些事情看起来很有趣。例如，使用 CSS 缩放的路径和使用画布自己的变换缩放的路径可能看起来非常不同（CSS 的看起来很糟糕，而画布的看起来很平滑）。这取决于浏览器，可能完全没问题。至少在 chrome 上，以这种方式缩放的文本看起来很糟糕。

相反，我建议查看我在这里写的关于“模型”坐标概念的内容：Working with canvas in different screen sizes

将所有内容都写成 600x300 的绘图空间，但保留 300x150 的画布。

在绘制任何东西之前使用ctx.scale(0.5, 0.5);，一切都会看起来很棒！

毕竟编写一个画布应用程序并让它扩展到各种屏幕是完全可能的，即使您只是针对一种屏幕尺寸。

【讨论】：