javascript - 不同像素密度的 Html Canvas

Question

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

是否有一个框架或一般设置可以很好地渲染 html Canvas ，并在不同的像素密度下以正确的大小呈现？

我明白为什么会出现这个问题。我已经进行了非常彻底的搜索，如果之前曾多次询问过这个问题，我深表歉意，但我仍然没有看到可靠的解决方案。

补充:澄清一下， Canvas 渲染在视网膜屏幕上看起来很模糊，我想有一种方法可以让渲染看起来清晰，无论它们在何处被查看。 Fabric 框架看起来很棒 but their demos still look fuzzy on my retina screen.

Answer 1

fabricjs 实现缩放 hack 以在屏幕上的像素和“逻辑像素”之间的不同比例的屏幕上很好地渲染 Canvas ，

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

如果你不想使用那个框架，这基本上就是它在纯 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+'px; height:'+h+'px;')
    
          // set the scale of the context
          c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
 }

请注意，浏览器必须支持 Retina。

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

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

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

<canvas id="canvas2" width="800" height="600"></canvas>

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

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