不同像素密度的 Html Canvas

Question

我希望有人可以帮助解决这个问题，因为我似乎找不到可靠的解决方案。

是否有框架或通用设置可以很好地呈现 html 画布，并且在不同的像素密度下以正确的大小呈现？

我明白为什么这个问题存在。我已经进行了非常彻底的搜索，所以如果之前多次问过这个问题，我很抱歉，但我仍然没有看到一个强大的解决方案。

补充：为了澄清，画布渲染在视网膜屏幕上看起来很模糊，我想有一种方法可以让渲染无论在哪里查看都看起来清晰。Fabric 框架看起来很棒，但他们的演示在我的视网膜屏幕上看起来仍然很模糊。

Answer 1

fabricjs 实现了缩放技巧，以在屏幕上的像素和“逻辑像素”之间具有不同比率的屏幕上很好地渲染画布，

当您将您的问题标记为视网膜缩放时，我认为您是在问这个问题。

如果你不想使用该框架，这基本上就是它在纯 javascript 中的工作方式（或多或少的 fabricjs 实现）

if( window.devicePixelRatio !== 1 ){
          var c = document.getElementById('mycanvas') // your canvas
          var w = c.width, h = c.height;

          // scale the canvas by window.devicePixelRatio
          c.setAttribute('width', w*window.devicePixelRatio);
          c.setAttribute('height', h*window.devicePixelRatio);

          // use css to bring it back to regular size
          c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')

          // set the scale of the context
          c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
 }

请注意，浏览器必须启用视网膜。

请检查这些图像在您的视网膜屏幕上看起来是否不同。首先启用视网膜，其次不启用。（请注意，可怕的图像）

if( window.devicePixelRatio !== 1 ){
          var c = document.getElementById('mycanvas') // your canvas
          var w = c.width, h = c.height;

          // scale the canvas by window.devicePixelRatio
          c.setAttribute('width', w*window.devicePixelRatio);
          c.setAttribute('height', h*window.devicePixelRatio);

          // use css to bring it back to regular size
          c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')

          // set the scale of the context
          c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
 }

var c = new fabric.StaticCanvas('canvas');
var c2 = new fabric.StaticCanvas('canvas2', {enableRetinaScaling: false});
fabric.Image.fromURL('http://www.free-desktop-backgrounds.net/free-desktop-wallpapers-backgrounds/free-hd-desktop-wallpapers-backgrounds/535693007.jpg', function(img) {
  img.scale(0.5);
  var circle = new fabric.Circle({radius: 40, fill: 'red', stroke: 'blue', top: 2, left: 2});
  
  c.add(img);
  c.add(circle);
  c2.add(img);
  c2.add(circle);
});

与其他图片链接：http : //www.deltalink.it/andreab/fabric/retina.html

编辑： 添加了矢量几何形状，看看是否有更多证据。

Answer 2

如果你看一下例如Three.js source，它会像这样实现调整大小：

this.setSize = function ( width, height, updateStyle ) {

        _width = width;
        _height = height;

        _canvas.width = width * pixelRatio;
        _canvas.height = height * pixelRatio;

        if ( updateStyle !== false ) {

            _canvas.style.width = width + 'px';
            _canvas.style.height = height + 'px';

        }

        this.setViewport( 0, 0, width, height );

    };

this.setViewport = function ( x, y, width, height ) {

        _viewportX = x * pixelRatio;
        _viewportY = y * pixelRatio;

        _viewportWidth = width * pixelRatio;
        _viewportHeight = height * pixelRatio;

        _gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );

    };

哪里_gl似乎是画布上下文。

看起来他们只是采用widthand height（例如屏幕宽度和高度）并将其与 a 相乘pixel ratio，据我所知， a 是 1-4 之间的某个整数。