以比屏幕更高的 DPI 创建画布对象?
我有一个画布对象,我需要能够以比本机屏幕分辨率更高的分辨率创建该对象。我正在使用 Flot 图形库,并且需要输出一个打印时与屏幕上显示时一样好的图形。
我能想到的唯一方法是将画布尺寸放大 3 倍,然后缩放,但我认为当我去打印时这不能正常工作。
有什么想法吗?
I've got a canvas object that I need to be able to create at a higher resolution than what native screen resolution is. I'm using the Flot graphs library, and I'd need to output a graph that looks just as good when it's printed as when it's displayed on screen.
The only method I can think of is making the canvas size 3x larger, then scaling, but I don't think that'd work properly when I go to print.
Any ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
因此,您建议您创建一个具有特定宽度和高度(它是本机分辨率)的画布元素,并将其缩放到不同的窗口坐标,例如:
我认为这样做的一个问题是打印渲染器可能会将缩放的画布视为图像并以文档像素分辨率渲染它,因此您可能无法获得所需的改进。
对于您想要的内容,可能值得了解是否可以使用 SVG。
So you are suggesting that you create a canvas element with a particular width and height (it's native resolution) and scale it to different window coordinates, e.g.:
I think a problem with doing this would be that the print renderer may treat the scaled canvas like an image and just render it at document pixel resolution, so you might not get the improvement you want.
For what you want it might be worth finding out if you could use SVG.
结束这个循环 - 我发现最好的选择是以 2 倍分辨率创建一个画布对象,然后使用宽度和高度 CSS 参数对其进行缩放。
Closing the loop on this one - I've found the best option is to create a canvas object at 2x resolution, then scale it using width and height CSS parameters.