EaselJS 图片缩放模糊

Question

使用 Bitmap 将图片导入 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();
    }

});

我从 photoshop 导出的图片是 400x400 还是 200x200 都没关系

图还在canvas。

如果我缩小它

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

变得极其模糊

有人知道解决方法吗？

Answer 1

Canvas 如果使用 CSS

缩放，输出可能会像素化

确保您不是在 CSS 中调整 canvas 大小，而是直接通过 HTML 或 JS 在 canvas 元素上调整，否则 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();
    }

});

EaselJS 图片缩放模糊

EaselJS Picture scaling blurred out

javascript

web

easeljs

Canvas 如果使用 CSS