为什么不推荐使用 context2d.backingStorePixelRatio？答案

【问题标题】：Why context2d.backingStorePixelRatio deprecated?为什么不推荐使用 context2d.backingStorePixelRatio？
【发布时间】：2014-08-11 12:41:07
【问题描述】：

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

如果此属性已被弃用，dart 会处理高清设备上的模糊问题吗？

【问题讨论】：

飞镖队的人知道这个吗？
这个问题毫无意义：backingStorePixelRatio 甚至没有在链接到的文章中提及。
@Will 文章和问题至少有 7 年的历史。我猜它已经更新了。
@KrisztiánBalla 是的，我在写完那条评论后得出了同样的结论。如果属实，我发现从根本上更改已发表文章而不包括任何表明文章已更改的指示是非常糟糕的形式。尤其是一个被引用的频率和那个显然是一样的。我认为这是完全缺乏诚信。
顺便说一句，尽管我可以凭经验确认下面接受的答案是正确的，但我发现它涉及对backingStorePixelRatio 和devicePixelRatio 之间差异的零解释，这很有趣。更糟糕的是，互联网上似乎没有人知道为什么除了devicePixelRatio 之外还需要存在backingStorePixelRatio，什么时候改变了，或者为什么改变了。每个似乎都像“哦，嘿，只需编写这两行代码就可以了！再见！”

标签： canvas dart html5-canvas

【解决方案1】：

我也有同样的想法，正如Issue Tracker 所说：

是的，所以这篇文章是在 Safari 有后备商店时写回的比率为 2。在 Chrome 中始终为 1。

正如您所说，处理此问题的方法是：

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

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

width 和 height 在哪里是你想要的（可能 window.innerWidth 和 innerHeight 用于完整的视口恶作剧。）

然后你只需要调整你放大画布的事实与：

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

所以你有你的解决方案。

【讨论】：