EaselJS图片缩放模糊了

时间:2018-05-18 16:43:02

标签: javascript web easeljs

使用位图将图片导入EaselJS:

var stage;
$(document).ready(function(){


    var gameCanvas = document.getElementById("game");
    stage = new createjs.Stage(gameCanvas);

    loadPics();





    function loadPics() {
        let image = new Image();
        image.src = "assets/img/island1.png";
        image.onload = loadPic;

    }

    function loadPic(event) {
        let bitmap = new createjs.Bitmap(event.target);
        bitmap.scaleX = 1;
        bitmap.scaleY = 1;

        bitmap.image.width = gameCanvas.width;
        stage.addChild(bitmap);
        stage.update();
    }

});

如果我从400x400或200x200

的photoshop导出图片并不重要

图片仍在画布上。

如果我缩小它

bitmap.scaleX = 0.2;
bitmap.scaleY = 0.2;

变得非常模糊

任何人都知道修复?

1 个答案:

答案 0 :(得分:0)

如果使用CSS缩放

,Canvas输出可以得到像素化

确保您不是在CSS中调整画布大小,而是通过HTML或JS直接在canvas元素上调整,否则画布输出会变形。

var stage;
$(document).ready(function(){


    var gameCanvas = document.getElementById("game"),
        windowWidth = $(window).width(),
        windowHeight = $(window).height();

    $(gameCanvas).width(windowWidth+'px');
    $(gameCanvas).height(windowHeight+'px');

    stage = new createjs.Stage(gameCanvas);

    loadPics();





    function loadPics() {
        let image = new Image();
        image.src = "assets/img/island1.png";
        image.onload = loadPic;

    }

    function loadPic(event) {
        let bitmap = new createjs.Bitmap(event.target);
        bitmap.scaleX = 1;
        bitmap.scaleY = 1;

        bitmap.image.width = gameCanvas.width;
        stage.addChild(bitmap);
        stage.update();
    }

});