Canvas google swiffy如何在画布标签中维护向量

我注意到，flash的google swiffy转换以某种方式维护文本和向量，使它们在视网膜显示上清晰可见，或者如果你缩放浏览器，所有向量都保持清晰

比如说。加载此广告

---

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

不同的设备可能具有不同的

像素比率。（请参见关于
pixelRatio
）

此外，像素比例可能会随着页面缩放而改变

有关更多信息，请参阅本文：

看。尝试缩放。
不同的设备可能具有不同的
像素比率。（请参见关于
pixelRatio
）

此外，像素比例可能会随着页面缩放而改变

有关更多信息，请参阅本文：

看。试着放大

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);