在另一个画布上绘制画布会变得模糊。我该如何解决？

Question

我一直在进行HTML5画布实验，并进行了一系列的技术实验 编辑 https://github.com/AlexChesser/jsSprite（Minotaur按键演示中使用WSAD，Q，E，X键，在Zombie Demo中添加C和B）

如果您查看演示文稿编号1：01-draw_minotaur.php，您将看到一个直接绘制在画布上的图像，它看起来很清晰。

然而，如果您将Minotaur放在画布上，然后将该画布绘制在父级上，结果会变得模糊：03-drawn_minotaur_on_canvas.php

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

编辑 完整代码已上传至GIT：https://github.com/AlexChesser/jsSprite

编辑2：请注意，谷歌已将我的域名标记为恶意软件（公平地说，由于托管提供商被黑客攻击，有一段时间存在某种恶意软件），我已经更新了链接，仅指向Github上的源代码。

- Alex C

---

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

谢谢。我已经更新了链接。它被标记为恶意软件，我已经将其删除，但是不能保证我的网络主机不会再次被黑客攻击。 - Alex C

是时候换一个新的网络主机了，我想。 :) - broofa

Answer 1

这是一个棘手的问题！

对于画布(canvas)，您实际上不使用样式来确定其宽度和高度。

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

因此，在您的主页面中编写<canvas id="game" width=512 height=512> </canvas> 将修复您的问题。

我测试过了以确认那确实是问题所在，如果还有什么问题，请告诉我，我会发送我的代码。

同时，应该只是MainContext.drawImage(m.canvas, 0, 0);吗？否则你会把Minotaur压扁吗？

- Simon Sarris

---

我现在就去检查！再次感谢你，西蒙。两个方面都是100％正确的。以前Mino没有被压扁，但样式有点奇怪。现在已经解决了。我认为我终于可以开始基本游戏逻辑了！再次感谢！ - Alex C

请不要喂弥诺陶洛斯怪兽，礼貌地微笑，然后移动到下一个动物。 - Pizzaiola Gorgonzola