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

Question

我知道HTML5Canvas采用的是Bitmap技术，放大时对画质有自己的限制

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

Answer 1

您可以通过使用 CSS 按比例缩小的超大尺寸 canvas 强制浏览器使您的绘图更高分辨率：

使 canvas 元素按比例大于预期的视口：
```
canvas.width=600;
canvas.height=300;
```
使用 CSS 到 按比例（重要！） 将 canvas 缩小到视口大小：
```
canvas{ width:200px; height:100px; }
```
使用 context.scale 将绘图缩放回预期大小：
```
context.scale(3,3);
```

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

这是使用 W3schools 的代码演示 link 您在评论中的站点：

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// scale all drawings back up to intended size
ctx.scale(3,3);
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

/* PROPORTIONALLY resize the canvas to the intended viewing size */
canvas{width:200px; height:100px; border:1px solid red;}

<!-- make the canvas over-sized -->
<canvas id="myCanvas" width=600 height=300></canvas>

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

How to improve the Canvas image quality when client zooms in the page?

html

bitmap

html5-canvas