固定Canvas内部像素尺寸 仅调整显示宽高比的方法

Canvas有两套独立的尺寸规则，之前的错误操作都是混淆了这两套规则导致的：

• 内部像素缓冲区尺寸：对应canvas.width、canvas.height属性，决定了画布实际存储的像素数量，这个值必须固定为512（宽）*3600（高），一旦修改就会出现空白区域、像素拉伸/裁剪的问题，不符合保留原始像素数据的要求。
• 页面渲染显示尺寸：对应canvas.style.width、canvas.style.heightCSS属性，浏览器默认如果只设置其中一个值，会自动按照内部缓冲区的宽高比计算另一个值，这就是之前仅修改canvas.style.width时高度也被同步拉伸的原因。

要达到「纵向显示长度固定、内部像素数据完全不变、仅横向拉宽显示效果」的需求，操作逻辑如下：

• 内部像素尺寸完全不动：保持canvas.width = 512、canvas.height = 3600的设置不变，所有像素生成、putImageData的绘图逻辑全部沿用原始尺寸，不需要对原始图像数据做任何修改。
• 显式同时设置两个CSS显示尺寸：不要只设宽度，要把高度也明确写死为你需要的固定值，宽度设置为拉宽后的目标值，浏览器就不会自动按原始比例拉伸高度。
• 保留已有的ctx.imageSmoothingEnabled = false配置，避免横向拉伸时出现模糊的插值效果，保持像素边缘锐利。

把makecanvas函数里之前尝试调整尺寸的错误代码替换为以下内容即可：

function makecanvas(idtag,height,imgdata){
    var canvas = document.getElementById(idtag),
        ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    // 内部像素尺寸固定，不做任何改动
    canvas.height = height;  
    canvas.width = width;      

    // 尺寸调整逻辑
    const horizontalScale = 1.25; // 自定义横向拉伸倍数，按需调整
    canvas.style.height = `${height}px`; // 纵向显示高度固定，和原始像素1:1映射
    canvas.style.width = `${Math.round(width * horizontalScale)}px`; // 仅横向拉宽到目标尺寸

    var idata = ctx.createImageData(width, height);
    idata.data.set(imgdata);
    ctx.putImageData(idata, 0, 0);
    return [idata,ctx];   
};

如果后续需要适配页面布局，不想固定3600px的显示高度，只需要等比例缩放两个CSS值即可，只要CSS宽高比和内部缓冲区的原始宽高比不一致，就能实现非等比的拉伸效果，完全不会影响内部存储的像素数据，滑块交互等原有逻辑不需要做任何改动。

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