谷歌如何在Canvas标签中维护向量 [英] How does google swiffy maintain vectors in Canvas tag

问题描述

我注意到Google从Flash进行的大量转换以某种方式维护了文本和矢量，从而使它们在视网膜显示屏上清晰显示，或者如果您缩放浏览器，所有矢量将保持清晰。

I've noticed that google swiffy conversions from flash somehow maintain text and vectors in a way that they are crisp on retina displays or if you zoom the browser, all vectors stay sharp.

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

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

Zoom your browser in on it as far as you can. You'll notice all the text and vectors are perfectly crisp. I'm trying to emulate this in my own hand coded canvas, but when I zoom in all my drawn shapes and text get blurry. They also look blurry on retina.

推荐答案

不同的设备可能具有不同的 pixelRatio 。 （有关 pixelRatio https://stackoverflow.com/a/8785677/512042 c $ c>）

Different devices may have different pixelRatio. (See https://stackoverflow.com/a/8785677/512042 about pixelRatio)

在页面缩放时pixelRatio也可能会发生变化。

Also pixelRatio might change on pages zoom.

有关更多信息，请查看本文： http://www.html5rocks.com/en/tutorials/ canvas / hidpi /？redirect_from_locale = ru

Look at this article for more info: 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);

请参见演示。尝试缩放。

这篇关于谷歌如何在Canvas标签中维护向量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！