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

Question

我已经设置了一个简单的画布，并在其上绘制了一个fillText。它看起来相当不错，但是当我使用浏览器提供的缩放功能（Safari，Firefox）时，反锯齿看起来很难看。

我试图使用scale（）提高网格，但它没有帮助。

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

---

截图（无变焦）：http://i.stack.imgur.com/CGWka.png

截图（最大缩放）：http://i.stack.imgur.com/vNPjF.png

Answer 1

您可以“缩放”画布通过绘制命令之前缩放画布背景下导致商品画在一个更大的尺寸，顺利。例如，请参阅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. 调整由特定因素height和画布的width（如4），
2. 使用CSS来设置显示高度和宽度回原来的大小，然后
3. 之前所有其他绘图命令，使用ctx.scale(4,4)扩大您的上下文。

编辑：我创建的这个位置的例子：
http://jsfiddle.net/u5QPq/embedded/result/（code）

这里是什么样子，当你放大，如：

作为额外的奖励，你的画布也会打印更顺利（万一有人杀死树木）。