html - 缩放位图后的 HTML5 图像质量不好

Question

我正在为移动设备创建我的第一个 HTML 5 游戏。

我只是使用库“Easeljs-0.7.0”，没有PhoneGap。

我将我的图像制作成 2024x1024 像素的画布，然后通过设置 scaleX 和 scaleY 来制作每个图像。但是，当比例小于 0.5 时，所有图像的质量都很差。

如何解决这个问题？

var test = new createjs.Bitmap("test.png");
test.scaleX = 0.23456;
test.scaleY = 0.23456;
APP.stage.addChild(test);
APP.stage.update();

score 1 · Accepted Answer

不幸的是，这就是 Canvas 渲染位图的方式，它不是 JavaScript 可以控制的。使用 `context.imageSmoothingEnabled' 属性可以在各种浏览器中获得一些结果，但目前它需要供应商前缀。看看这个线程：画布图像平滑

要使用 EaselJS 执行此操作，您需要获取画布上下文，如果不手动访问它，则当前无法使用它：

var context = myStage.canvas.getContext("2d");
context.webkitImageSmoothingEnabled = context.mozImageSmoothingEnabled = true;

1 回答 1