Question

我注意到来自闪光灯的谷歌swiffy转换以某种方式维护文本和矢量，使得它们在视网膜显示器上清晰，或者如果你缩放浏览器，所有矢量都保持清晰。

例如。加载此广告https://developers.google.com/swiffy/showcase/google-chrome-ad

尽可能缩放浏览器。您会注意到所有文本和向量都非常清晰。我试图在我自己的手工编码画布中模仿这个，但当我放大所有绘制的形状和文字变得模糊。它们在视网膜上看起来也很模糊。

Answer 1

不同的设备可能有不同的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。尝试缩放。

谷歌swiffy如何在Canvas标签中维护向量

1 个答案: