我知道 HTML5 Canvas 采用 Bitmap 技术,在放大时对图像质量有其自身的限制。
但是如果客户使用浏览器的缩放功能(例如在chrome上,客户使用Ctrl +鼠标滚动)放大页面,有什么解决方案可以保持图像质量?
最佳答案
您可以使用 CSS 按比例缩小的超大 Canvas ,强制浏览器使您的绘图分辨率更高:
使 Canvas 元素按比例大于预期的视口(viewport):
canvas.width=600; canvas.height=300;
使用 CSS 按比例(重要!) 将 Canvas 缩小到视口(viewport)大小:
canvas{ width:200px; height:100px; }
使用
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>
关于html - 客户端放大页面时如何提高Canvas画质?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31932579/