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

Question

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

我尝试使用scale()提升网格,但它没有帮助.

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

---

截图(无缩放):http://i.stack.imgur.com/CGWka.png

截图(最大缩放):http://i.stack.imgur.com/vNPjF.png

Answer 1

您可以通过在绘制命令之前缩放画布上下文来"缩放"画布,从而平滑地绘制更大尺寸的项目.例如,请参阅我的示例,该示例允许您放大绘制项目并查看默认演示文稿中不可用的详细信息.

浏览器缩放的问题在于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. 在所有其他绘图命令之前,使用扩展您的上下文ctx.scale(4,4).

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

这是放大时的样子:

作为一个额外的好处,你的画布也将打印得更顺畅(如果有人杀树).