HTML5缩放位图后的图像质量很差

Question

我正在使用HTML 5 for mobile创建我的第一款游戏。

我只是使用“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();

Answer 1

不幸的是，这就是Canvas渲染位图的方式，而不是可以通过JavaScript控制的东西。使用`context.imageSmoothingEnabled'属性可以在各种浏览器中获得一些结果，但目前它需要供应商前缀。看看这个帖子： Canvas Image Smoothing

要使用EaselJS执行此操作，您需要获取画布上下文，该上下文在没有手动访问的情况下当前不可用：

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