Javascript HTML5画布是否支持基于浏览器的缩放？

我设置了一个简单的画布，上面画了一个填充文本。它看起来相当不错，但当我使用浏览器提供的缩放功能（Safari、Firefox）时，抗锯齿看起来很难看

我尝试使用scale（）来升高网格，但没有效果

有没有办法在画布上画出一个即使是放大的浏览器窗口也看起来很锐利的画面

---

屏幕截图（无缩放）：

---

屏幕截图（最大缩放）：

您可以在绘制命令之前通过缩放画布上下文来“缩放”画布，以使项目以更大的尺寸平滑地绘制。例如，请参见，它允许您放大绘图项目，并查看默认演示文稿中不可用的详细信息

浏览器缩放的问题在于HTML5画布类似于JPG或PNG，而与SVG不同，它基于单个像素。如果您以10像素绘制一个圆，然后告诉浏览器将其缩放到50像素，则浏览器无法“发明”数据来绘制平滑的圆。它所能做的最好的事情就是提供图像插值，使“大像素”看起来稍微平滑一些

解决方案

使用图像，您可以拍摄大量像素（例如1000x800）的图片，并告诉浏览器以不同的较小尺寸（例如250x200）显示。当浏览器放大时，将显示更多像素。例如：

<img src="1000x800.jpg" style="width:250px; height:200px">

你可以用画布做同样的事情。画布中的数据像素数由

高度

和

宽度

属性（HTML或JavaScript）指定。您可以单独将CSS显示大小（如上所述）指定为较小的大小。您甚至不需要修改现有的画布绘制代码；简单地说：

按特定系数（例如4）调整画布的

高度

和

宽度

使用CSS将显示高度和宽度设置回原始大小，然后

在所有其他绘图命令之前，请使用

ctx.scale（4,4）

放大上下文

编辑：我在这里创建了一个示例：
（）

以下是放大时的效果：

---

作为额外的好处，您的画布也将更加平滑地打印（以防有人杀死树木）。

简短的回答是否，

canvas

元素将不会自动支持基于浏览器的缩放，即当您放大时，您的画布元素将看起来很难看。你的浏览器根本无法绘制不存在的细节

但是，在桌面上使用浏览器缩放时会发生三种情况：

窗口.devicePixelRatio

值更改以反映新的物理与逻辑像素比率

报告的宽度和高度（

window.innerWidth

和

window.innerHeight

）随响应而变化

触发

onresize

事件

这意味着您可以监听

onresize

事件，并根据新的像素比率和显示大小重新创建画布。在桌面上，这将为您提供一个始终清晰的画布元素，而无需以比所需更高的分辨率绘制画布元素

我还写了一篇关于媒体的文章，详细介绍了这种方法，以及其他一些可以让视力差的人更容易访问画布元素的技术：

---

不幸的是，手机/平板电脑夹点缩放的工作原理略有不同，而这种方法在那里不起作用。如果有任何人有一个替代方法，将与捏缩放工作，我很乐意听到他们

谢谢你的回答。这就是我需要的。：-）@不客气。请注意，如果这个答案解决了你的问题，你应该“接受”它：。@Phrogz：非常感谢这个有用的例子。我遇到了可能相关的问题。希望能指导我找到解决办法。我使用ng签名板（基于画布）捕获签名（基于涂鸦）。问题在于，如果浏览器不是100%缩放，绘图区域就会混乱，当我在缩放不是100%时将现有图像（使用

FileReader

）上载到画布上时，图像看起来很有趣或被截断。我怎样才能解决这个问题？@tarekahf你应该把它作为一个问题，而不是作为对一个（相关但不同的）问题答案的评论发布。@Phrogz:我添加了这个问题。希望不会有反对票！