Javascript 为什么我的位图图像在使用EaselJS的画布中出现别名？

我正在使用HTML5画布和CreateJS库制作一个纸牌游戏

我有卡片图像（png），我将其缩小10倍，然后将它们显示在画布上。由于某些原因，它们总是显示为别名（在所有浏览器和所有操作系统上）

下面是一段代码摘录，演示如何将卡添加到舞台

var card = new createjs.Bitmap("images/two_of_hearts.png");
card.setTransform(100, 100, .1, .1);
stage.addChild(card);
stage.update();

正如我所说的，我已经在多个浏览器上尝试过了，并且所有浏览器上都出现了相同的情况。我发现一些人在谈论使用AlphaMaskFilter，这可能会起到作用，但我没有发现任何文档告诉我应该如何使用AlphaMaskFilter

---

有什么想法吗？如何使我的卡片抗锯齿，或者如何使用AlphaMaskFilter实现抗锯齿？

您的问题是您正在缩放图形，并且缩放比例为10倍！当结果图像的大小显著不同时，缩放图像会产生锯齿图像。我建议您根据需要的大小创建其他图像。这样做可以让您完全控制这些图像的外观。如果坚持使用较大的图像并对其进行缩放，则需要通过几个步骤对其进行缩放，以减轻锯齿。这里有一个。

AlphaMaskFilter无法帮助您的图像抗锯齿。EaselJS直接在舞台上绘制图像，如果你缩小它的比例，Canvas在缩小图像比例方面做得并不好，这可能是生活中的一个事实。谢谢，我恐怕是这样的。我将尝试使用SVG图像，并制作新的、更小的图像，看看效果如何。逐级向下扩展的开销似乎太大了。顺便说一句，有没有迹象表明“显著不同”有多不同？或者在任何我能找到合理缩放的极限的地方？我不知道我头脑中的极限。你试图一次扩大到90%。我曾多次链接到“缩放到50%”的示例。我的猜测可能介于这两个值之间，可能取决于图片的详细程度。关于缩放图像的开销，除非您同时缩放几十（数百？）个图像，或者在每个渲染上缩放图像，否则这并不是什么大问题。我决定咬紧牙关，使用GIMP手动调整原始PNG图像的大小，使其达到原始大小的四分之一。卡片显示得很漂亮，一切都很好。谢谢你们的帮助。嘿，伙计们，关于如何用CreateJS应用逐步转换有什么想法吗？由于画布是CreateJS阶段的容器，因此在画布上进行直接转换似乎不是选项。在BMP上调用setTransform并多次更新stage并不能起作用。