我设置了一个简单的画布，上面画了一个填充文本。看起来还不错，但是当我使用浏览器提供的缩放功能（Safari、Firefox）时，抗锯齿看起来很丑。
我尝试使用 scale() 提升网格，但没有帮助。
有没有什么方法可以在画布上绘制，即使浏览器窗口放大了也看起来很清晰？
截图（无缩放）：http://i.stack.imgur.com/CGWka.png
屏幕截图（最大缩放）：http://i.stack.imgur.com/vNPjF.png
【问题讨论】：
标签： javascript css html canvas
您可以通过在绘制命令之前缩放画布上下文来“缩放”画布，以使项目以更大的尺寸平滑绘制。例如，请参阅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 显示尺寸（如上）指定为较小的尺寸。您甚至不需要修改现有的画布绘图代码；简单地说：
height 和width 调整为特定因子（例如4），ctx.scale(4,4) 放大您的上下文。编辑：我在这里创建了一个示例：
http://jsfiddle.net/u5QPq/embedded/result/ (code)
这是放大后的样子：
作为额外的奖励，您的画布也将打印更顺畅（以防有人想要砍树）。
【讨论】：
FileReader）上传到画布上时，图像看起来很有趣或被截断.我该如何解决这个问题？
简短的回答是否定的，canvas 元素不会自动支持基于浏览器的缩放，即当您放大时，您的画布元素会看起来很丑。您的浏览器根本无法绘制不存在的细节。
但是，在桌面上使用浏览器缩放时会发生三件事：
window.devicePixelRatio 值会发生变化，以反映新的物理与逻辑像素比率。window.innerWidth 和 window.innerHeight）会随着响应而变化。onresize 事件触发。这意味着您可以监听onresize 事件，并根据新的像素比率和显示尺寸重新创建您的画布。在桌面上，这将为您提供始终清晰的画布元素，而无需以比所需更高的分辨率绘制画布元素。
我还在 Medium 上写了一篇文章，详细介绍了这种方法以及可用于使视力不佳的人更容易访问画布元素的其他技术：HTML canvas and accessibility
不幸的是，移动/平板电脑捏缩放的工作方式略有不同，并且这种方法不适用于那里。如果有人有可以使用捏缩放的替代方法，我很想听听他们的意见！
【讨论】：
devicePixelRatio）执行的，然后通过 CSS 转换为不同的大小，然后浏览器再次将其缩放到目标大小。那是对的吗？这意味着总会有缩放伪影，因为画布被缩放了两次。我说的对吗？