Question

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

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

Answer 1

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

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

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

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

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>

如何在客户端放大页面时改善画布图像质量？

1 个答案: