canvas - 为什么不赞成使用context2d.backingStorePixelRatio？

Question

根据Paul Lewis的文章High DPI Canvas:您需要考虑context.backingStorePixelRatio来解决模糊问题。

如果不建议使用此属性， Dart 能否解决高清设备上的模糊问题？

Answer 1

我认为完全一样的事情，就Issue Tracker而言:

Yes, so the article was written back when Safari had a backing store ratio of 2. It's always been 1 in Chrome.

As you say the approach for dealing with this is:

canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;

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

Where width and height are however you want them (probably window.innerWidth & innerHeight for full viewport shenanigans.)

Then you just need to adjust for the fact that you upscaled the canvas with:

ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

因此，您有解决方案。