google swiffy 如何维护 Canvas 标签中的向量

Question

我注意到 google 从 Flash 快速转换以某种方式保持文本和矢量在视网膜显示器上清晰，或者如果您缩放浏览器，所有矢量都保持清晰。

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

尽可能放大浏览器。您会注意到所有文本和矢量都非常清晰。我试图用自己的手写代码 canvas 来模拟这一点，但是当我放大所有绘制的形状和文本时，它们会变得模糊。它们在视网膜上看起来也很模糊。

Answer 1

不同的设备可能有不同的pixelRatio。（参见关于 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。尝试缩放。

google swiffy 如何维护 Canvas 标签中的向量

How does google swiffy maintain vectors in Canvas tag

canvas

google-swiffy