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(); 

Answer 1

不幸的是，這是Canvas如何呈現位圖，而不是可以由JavaScript控制的東西。可以使用`context.imageSmoothingEnabled'屬性在各種瀏覽器中獲得一些結果，但目前它需要供應商前綴。看看這個線程： Canvas Image Smoothing

要使用EaselJS做到這一點，你需要得到畫布背景下，這是當前不可用而不需要手動訪問它：

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