如何在不缩放内容的情况下修改EaselJS画布宽度

这个问题我之前也踩过坑！核心是你混淆了Canvas元素的原生尺寸属性和它的CSS显示尺寸——这俩完全是两回事儿：

• 你之前用的 $('canvas').width(...) 其实是在修改Canvas的CSS宽度，相当于把整个画布（包括里面的内容）当成一张图片拉伸，所以才会出现内容跟着缩放的情况。
• 而要真正调整Canvas的绘图缓冲区大小（也就是你说的「只想设置新的画布宽度」），需要修改Canvas元素的原生 width 属性，而不是CSS样式。

具体解决方案 #

用jQuery的话，你需要用 .prop() 方法来操作Canvas的原生属性，而不是 .width()（后者是操作CSS样式）：

// 获取Canvas当前的原生绘图宽度（不是页面上显示的CSS宽度）
const currentNativeWidth = $('canvas').prop('width');
// 设置新的原生宽度，比如加倍
$('canvas').prop('width', currentNativeWidth * 2);

如果用原生JS的话更直接：

const canvas = document.querySelector('canvas');
// 直接修改原生width属性，扩展绘图缓冲区
canvas.width = canvas.width * 2;

重要注意事项 #

1. 修改Canvas的原生 width/height 属性会清空画布，所以如果之前已经绘制了内容，你需要在调整宽度后重新绘制一遍所有缩放后的子元素。
2. 如果需要保持Canvas在页面上的显示大小不变（只扩展绘图区域），调整原生宽度后记得把CSS宽度改回原来的数值：

// 先保存页面上的显示宽度
const displayWidth = $('canvas').width();
// 扩展原生绘图宽度
$('canvas').prop('width', $('canvas').prop('width') * 2);
// 恢复页面显示大小，避免画布在页面上被拉伸
$('canvas').width(displayWidth);

这样操作后，你的Canvas绘图区域会变宽，足以容纳缩放后的子元素，同时内容不会被额外缩放。

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