我注意到来自闪光灯的谷歌swiffy转换以某种方式维护文本和矢量,使得它们在视网膜显示器上清晰,或者如果你缩放浏览器,所有矢量都保持清晰。
例如。加载此广告https://developers.google.com/swiffy/showcase/google-chrome-ad
尽可能缩放浏览器。您会注意到所有文本和向量都非常清晰。我试图在我自己的手工编码画布中模仿这个,但当我放大所有绘制的形状和文字变得模糊。它们在视网膜上看起来也很模糊。
答案 0 :(得分:0)
不同的设备可能有不同的pixelRatio
。 (请参阅https://stackoverflow.com/a/8785677/512042关于pixelRatio
)
此外,pixelRatio可能会在页面缩放时发生变化。
请查看此文章以获取更多信息:http://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=ru
var width = 300;
var heigth = 300;
canvas.style.width = width + 'px';
canvas.style.heigth = heigth + 'px';
var ctx = canvas.getContext('2d');
function draw() {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
// change canvas "pixels" size
canvas.width = 300 * ratio;
canvas.height = 300 * ratio;
ctx.clearRect(0,0,300, 300);
ctx.scale(ratio, ratio);
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fill();
}
draw();
// as there is no "on page zoom" event:
setInterval(draw, 300);
见DEMO。尝试缩放。