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

EN

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

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

解决方案

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

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

您可以对画布执行相同的操作。画布中数据的像素数由height和width属性(在HTML或JavaScript中)指定。您可以将CSS显示大小(如上所示)单独指定为较小的大小。您甚至不需要修改现有的画布绘制代码；只需：

1. 使用特定因子(例如4)调整画布的height和width，
2. 使用CSS将显示高度和宽度设置回原始大小，然后在所有其他绘制命令之前使用
3. 缩放上下文

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

http://jsfiddle.net/u5QPq/embedded/result/ (code)

这是你放大后的样子：

​

作为一个额外的好处，你的画布也会打印得更流畅(以防有人杀树)。

简短的回答是否定的，canvas元素不会自动支持基于浏览器的缩放，也就是说，当你放大的时候，你的画布元素看起来会很丑陋。你的浏览器根本无法绘制不存在的细节。

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

1. window.devicePixelRatio值更改以反映新的物理与逻辑像素比率。
2. 报告的宽度和高度(window.innerWidth和window.innerHeight)更改作为响应。
3. 触发onresize事件。

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

codepen proof of concept

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

不幸的是，移动设备和平板电脑的缩放方式略有不同，这种方式在那里行不通。如果任何人有其他方法可以与收缩缩放工作，我很乐意听到他们！