谷歌swiffy如何維護帆布標籤中的矢量

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。嘗試放大。