JS Canvas图片旋转失效求助：代码无报错但不生效

你的代码存在两个核心问题导致图片无法正确旋转：

问题1：图片加载异步未处理 #

Image对象加载是异步操作，直接设置src后立刻调用drawImage，图片大概率还没加载完成，此时绘制的是空白内容，或浏览器缓存原图但未执行旋转逻辑。

问题2：旋转坐标系与绘制坐标不匹配 #

你将画布平移到(x,y)后执行旋转，但drawImage依然使用(x,y)作为绘制起点——在平移后的坐标系中，这个坐标相当于在原坐标基础上又偏移了(x,y)，导致图片位置偏离旋转中心，旋转效果无法正确呈现。正确做法是让图片中心对齐旋转原点，即在平移后的坐标系中，用负的图片半宽半高作为绘制起点。

修复后的代码 #

export function drawImage(src, sizeX, sizeY, x, y, rotation, ctx) {
    let img = new Image(sizeX, sizeY);
    // 等待图片加载完成后再执行绘制逻辑
    img.onload = function() {
        ctx.save();
        
        // 平移到目标位置（旋转中心）
        ctx.translate(x, y);
        // 将角度转为弧度并旋转
        ctx.rotate((rotation * Math.PI) / 180);
        // 以图片中心为旋转点绘制，起点设为图片半宽半高的负值
        ctx.drawImage(img, -sizeX/2, -sizeY/2, sizeX, sizeY);
        
        ctx.restore();
    };
    img.src = src;
};

额外说明 #

• 若需重复绘制同一张图片，建议提前加载并缓存图片，避免每次调用重新加载，提升性能。
• 若旋转后图片被裁剪，需确保Canvas尺寸足够容纳旋转后的图片范围。

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