使用静态分辨率缩放canvas元素

Question

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

Answer 1

使用CSS更改大小

Live Demo

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

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

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

然后使用css

更改其显示的大小

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

Answer 2

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

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

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

在绘制任何内容之前使用ctx.scale(0.5, 0.5);，一切都会很棒！

毕竟编写一个画布应用程序并且可以扩展到各种屏幕，即使您只是针对一个屏幕尺寸，也很可能。