在另一个画布上绘制画布是模糊的。我该如何解决？

Posted 2023-03-05

【中文标题】在另一个画布上绘制画布是模糊的。我该如何解决？

【英文标题】：Drawing a canvas on another canvas is blurry. How can I fix it?

【发布时间】：2011-08-07 21:29:14

【问题描述】：

我一直在进行一些 html5 画布实验并进行了一系列技术实验edit https://github.com/AlexChesser/jsSprite（Minotaur 键演示中的 WSAD、Q、E、X 键，添加 C 和 B在僵尸演示中）

如果您查看演示编号 1：01-draw_minotaur.php，您会看到直接在画布上绘制的图像，它看起来漂亮而清晰。

但是，如果您与我将 Minotaur 放在画布上然后在父级上绘制该画布的演示进行比较，结果是模糊的：03-drawn_minotaur_on_canvas.php

如何确保画布上的画布不模糊？

EDIT 完整代码在 GIT 上：https://github.com/AlexChesser/jsSprite

edit2： 请注意，谷歌已将我的域标记为恶意软件（公平地说，由于托管服务提供商被黑客入侵，有一个短暂的时刻，其中存在某种恶意软件）而不是离开易受攻击的链接，我已经更新为专门指向 github 中的源代码。

【问题讨论】：

第一个链接现在被谷歌标记为恶意软件。 :(

谢谢。我已经更新了链接。它被标记为恶意软件，我已将其删除，但不能保证我的虚拟主机不会再次被黑客入侵。

是时候换一个新的虚拟主机了，我想。 :)

【参考方案1】：

这是一个棘手的问题！

对于画布，您实际上并不使用 Style 来确定其宽度和高度。

因此，通过设置画布的样式，实际上是在扭曲画布。

所以在你的主页上写<canvas id="game" width=512 height=512> </canvas>会解决你的问题。

我对其进行了测试以确认确实是问题所在，因此如果仍有问题，请告诉我，我会将代码发送给您。

也不应该只是 MainContext.drawImage(m.canvas, 0, 0); 吗？否则你会压扁牛头怪？

【讨论】：

我马上去看看！再次感谢西蒙。 ...（编辑）在这两个方面都 100% 正确。以前，Mino 并没有被压扁，但它的风格有点奇怪。现在让它滚动。我认为我现在终于可以了解基本的游戏逻辑了！再次感谢！

请不要喂牛头怪，礼貌微笑，然后移到下一个动物。