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

Question

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

Answer 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; 
}?

Answer 2

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

相反,我建议看看我在这里写的关于"模型"坐标的概念:使用不同屏幕尺寸的画布

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

在绘制任何东西之前ctx.scale(0.5, 0.5);,一切都会很棒!

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