我设置了一个简单的画布,上面画了一个fillText。它看起来很不错,但当我使用浏览器提供的缩放功能(Safari,Firefox)时,抗锯齿效果看起来很难看。
我试着使用scale()提升网格,但是没有用。
有没有办法在画布上画出即使是放大的浏览器窗口也能看起来很清晰的画布?
屏幕截图(不缩放):http://i.stack.imgur.com/CGWka.png
屏幕截图(最大缩放):http://i.stack.imgur.com/vNPjF.png
发布于 2011-11-20 23:46:00
在执行绘图命令之前,您可以通过缩放画布上下文来“缩放”画布,从而以更大的尺寸流畅地绘制项目。例如,请参见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显示大小(如上所示)单独指定为较小的大小。您甚至不需要修改现有的画布绘制代码;只需:
height
和width
,编辑:我在这里创建了一个示例:
http://jsfiddle.net/u5QPq/embedded/result/ (code)
这是你放大后的样子:
作为一个额外的好处,你的画布也会打印得更流畅(以防有人杀树)。
发布于 2020-06-22 04:48:33
简短的回答是否定的,canvas
元素不会自动支持基于浏览器的缩放,也就是说,当你放大的时候,你的画布元素看起来会很丑陋。你的浏览器根本无法绘制不存在的细节。
但是,当在桌面上使用浏览器缩放时,会发生三种情况:
window.devicePixelRatio
值更改以反映新的物理与逻辑像素比率。window.innerWidth
和window.innerHeight
)更改作为响应。onresize
事件。这意味着您可以侦听onresize
事件,并根据新的像素比率和显示大小重新创建画布。在桌面上,这将为您提供一个始终清晰的画布元素,而不需要以高于所需的分辨率绘制画布元素。
我还在Medium上写了一篇文章,更详细地介绍了这种方法,以及其他可以用来使视力不佳的人更容易访问画布元素的技术:HTML canvas and accessibility
不幸的是,移动设备和平板电脑的缩放方式略有不同,这种方式在那里行不通。如果任何人有其他方法可以与收缩缩放工作,我很乐意听到他们!
https://stackoverflow.com/questions/8200792
复制相似问题