客户端放大页面时如何提高Canvas图片质量？

Question

我知道 HTML5 Canvas 采用 Bitmap 技术，在放大时对图像质量有自己的限制。

但是，如果客户端使用浏览器的缩放功能（例如在 chrome 上，客户使用 Ctrl + 鼠标滚动）放大页面，是否有任何解决方案可以保持图像质量？

Answer 1

您可以强制浏览器使用超大画布（使用 CSS 按比例缩小）使您的绘图更高分辨率：

1. 使画布元素按比例大于预期的视口：

   canvas.width=600;
   canvas.height=300;
   

2. 使用 CSS 按比例（重要！）将画布缩小到视口大小：

   canvas{ width:200px; height:100px; }
   

3. 用于context.scale将您的绘图缩放回预期大小：

   context.scale(3,3);
   

然后，当使用辅助功能（f.ex ctrl+mouseScroll）缩放画布时，您的绘图将具有足够的像素分辨率，在放大时看起来可以接受。

这是使用 W3schools 在评论中链接您的网站的代码演示：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2

canvas.width=600;
canvas.height=300;

canvas{ width:200px; height:100px; }

context.scale(3,3);