HTML5 canvas是否支持基于浏览器的缩放？

Question

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

我尝试使用scale（）提升网格，但它没有帮助。

是否有任何方法可以在画布上绘制，即使使用缩放的浏览器窗口，它看起来也很清晰？

---

屏幕截图（无缩放）：http://i.stack.imgur.com/CGWka.png

屏幕截图（最大缩放）：http://i.stack.imgur.com/vNPjF.png

Answer 1

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

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

解决方案

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

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

你可以用画布做同样的事情。画布中 data 的像素数由height和width属性（HTML或JavaScript）指定。您可以单独将CSS 显示大小（如上所述）指定为较小的大小。您甚至不需要修改现有的画布绘图代码;简单地：

1. 根据特定因素（例如4）调整画布的height和width，
2. 使用CSS将显示高度和宽度设置回原始大小，然后
3. 在所有其他绘图命令之前，使用ctx.scale(4,4)扩展您的上下文。

编辑：我在这里创建了一个例子：
http://jsfiddle.net/u5QPq/embedded/result/（code）

以下是放大时的样子：


作为一个额外的好处，你的画布也会更顺畅地打印（如果有人杀树）。

Answer 2

简短的回答是“否”，一个canvas元素将不会自动支持基于浏览器的缩放，即，放大时，您的canvas元素看起来很难看。您的浏览器根本无法绘制不存在的细节。

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

1. window.devicePixelRatio值发生变化，以反映新的物理像素对逻辑像素的比率。
2. 报告的宽度和高度（window.innerWidth和window.innerHeight）随响应而变化。
3. onresize事件触发。

这意味着您可以监听onresize事件，并根据新的像素比率和显示尺寸重新创建画布。在桌面上，这将为您提供始终清晰的canvas元素，而无需以比所需分辨率更高的分辨率绘制canvas元素。

codepen proof of concept

我还写了一篇有关Medium的文章，其中更详细地介绍了这种方法，以及可用于使视力不好的人更容易使用画布元素的其他技术：HTML canvas and accessibility

不幸的是，手机/平板电脑的捏缩放功能略有不同，这种方法在这里不起作用。如果有人采用适合捏变焦的替代方法，我希望听到他们的声音！