为什么我的位图图像使用EaselJS在画布中显示别名？

Question

我正在使用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来实现抗锯齿？

Answer 1

你的问题是你正在缩放图形，并且要10倍！当得到的图像的大小显着不同时，缩放图像会产生混叠图像。我建议你以你需要的尺寸创建额外的图像。这样做可以让您完全控制这些图像的外观。如果您坚持使用较大的图像并对其进行缩放，则需要使用几个步骤对其进行缩放以减轻锯齿。这是example using a raw canvas。