EaselJS中Bitmap导入图片缩放模糊及显示异常问题求助

我来帮你排查下问题根源，再给出针对性的解决办法：

问题核心原因 #

你代码里的bitmap.image.width = gameCanvas.width是关键问题——这行代码直接修改了原始图片DOM元素的尺寸，强制把图片拉到画布宽度，完全忽略了它原本的像素比例。所以不管你导入400x400还是200x200的图，都会被强行铺满画布；之后再设置缩放比例时，已经被拉伸变形的图片再缩小，自然会出现严重模糊。

分步解决方案 #

1. 移除强制修改图片尺寸的代码

首先删掉bitmap.image.width = gameCanvas.width;这一行，不要直接操作Bitmap的原始image元素尺寸。EaselJS的Bitmap会基于原始图片像素渲染，我们应该通过缩放属性控制显示大小，而非修改图片本身。

2. 正确控制图片缩放（按需选择）

如果想要图片适配画布且保持比例，可以通过计算缩放值实现；如果只是需要固定比例缩小（比如你要的0.2），直接设置缩放属性即可：

function loadPic(event) {
  let bitmap = new createjs.Bitmap(event.target);
  
  // 方案1：固定比例缩放（比如0.2，基于原图尺寸，不会模糊）
  bitmap.scaleX = 0.2;
  bitmap.scaleY = 0.2;

  // 方案2：按比例适配画布（避免拉伸，可选）
  // const canvasWidth = gameCanvas.width / (window.devicePixelRatio || 1);
  // const canvasHeight = gameCanvas.height / (window.devicePixelRatio || 1);
  // const scaleX = canvasWidth / bitmap.image.width;
  // const scaleY = canvasHeight / bitmap.image.height;
  // const scale = Math.min(scaleX, scaleY); // 取较小值，避免超出画布
  // bitmap.scaleX = bitmap.scaleY = scale;
  // // 可选：让图片居中显示
  // bitmap.x = (canvasWidth - bitmap.image.width * scale) / 2;
  // bitmap.y = (canvasHeight - bitmap.image.height * scale) / 2;

  stage.addChild(bitmap);
  stage.update();
}

3. 解决高清屏模糊问题（可选但推荐）

如果在Retina等高清屏幕上仍有模糊，需要让Canvas适配像素密度：

$(document).ready(function(){ 
  var gameCanvas = document.getElementById("game"); 
  // 适配高清屏
  const pixelRatio = window.devicePixelRatio || 1;
  // 设置Canvas绘图缓冲区尺寸
  gameCanvas.width = gameCanvas.offsetWidth * pixelRatio;
  gameCanvas.height = gameCanvas.offsetHeight * pixelRatio;
  // 初始化Stage并设置缩放
  stage = new createjs.Stage(gameCanvas);
  stage.scaleX = stage.scaleY = pixelRatio;
  // 保持Canvas显示尺寸不变
  gameCanvas.style.width = gameCanvas.offsetWidth + "px";
  gameCanvas.style.height = gameCanvas.offsetHeight + "px";

  loadPics();
  // ... 其余代码不变
});

完整修改后的代码示例 #

var stage; 
$(document).ready(function(){ 
  var gameCanvas = document.getElementById("game"); 
  // 适配高清屏
  const pixelRatio = window.devicePixelRatio || 1;
  gameCanvas.width = gameCanvas.offsetWidth * pixelRatio;
  gameCanvas.height = gameCanvas.offsetHeight * pixelRatio;
  stage = new createjs.Stage(gameCanvas);
  stage.scaleX = stage.scaleY = pixelRatio;
  gameCanvas.style.width = gameCanvas.offsetWidth + "px";
  gameCanvas.style.height = gameCanvas.offsetHeight + "px";

  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 = 0.2; 
    bitmap.scaleY = 0.2; 
    stage.addChild(bitmap); 
    stage.update(); 
  } 
}); 

这样修改后，图片会基于原始像素尺寸进行缩放，不会被强制拉伸，设置0.2的缩放比例时，是直接缩小原图，自然就不会出现模糊问题了。

内容的提问来源于stack exchange，提问作者filip