html - 在另一个 Canvas 上绘制 Canvas 是模糊的。我该如何解决？

Question

我一直在进行一些 HTML5 Canvas 实验，并进行了一系列技术实验编辑 https://github.com/AlexChesser/jsSprite (WSAD,Q,E,X keys on the Minotaur key demo, add C and B on the Zombie Demo)

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

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

如何确保 Canvas 上的 Canvas 绘图不模糊？

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

edit2:请注意，谷歌已将我的域标记为恶意软件(这是公平的，因为托管服务提供商被黑了，有一小段时间那里有某种恶意软件)而不是离开易受攻击的链接，我已经更新为专门指向 github 中的源。

Answer 1

这是一个棘手的问题!

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

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

这样写<canvas id="game" width=512 height=512> </canvas>在您的主页中将解决您的问题。

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

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