html - 客户端放大页面时如何提高Canvas画质？

Question

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

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

Answer 1

您可以使用 CSS 按比例缩小的超大 Canvas ，强制浏览器使您的绘图分辨率更高:

1. 使 Canvas 元素按比例大于预期的视口(viewport):

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

2. 使用 CSS 按比例(重要!) 将 Canvas 缩小到视口(viewport)大小:

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

3. 使用 context.scale 将绘图缩放回预期大小:

   context.scale(3,3);
   

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

这是一个代码演示，使用您在评论中提供的 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>