Canvas图案图像高度设置问题：帧图像缩放失效被截断

我懂你现在的困扰——你通过resizeMultiplyer调整了边框的高度参数，虽然填充的区域大小变了，但边框图像本身没跟着缩放，导致图案被截断了。这是因为你当前只修改了高度的数值，却没有对边框图像元素本身做缩放处理。

问题根源 #

你现在的代码只是修改了this.frame.top.height这个变量值，然后直接用原尺寸的this.frame.top图像创建重复图案。填充区域的高度变了，但图案的源图像还是原来的大小，自然会出现截断的情况。

解决方案：先缩放边框图像，再创建图案 #

我们需要先把边框图像按resizeMultiplyer的比例缩放，再用缩放后的图像来生成填充图案。可以借助一个临时Canvas来实现这个缩放操作：

// 创建临时Canvas用于缩放边框图像
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');

// 设置临时Canvas的尺寸为缩放后的大小（这里宽度保持原尺寸，高度按比例缩放）
tempCanvas.width = this.frame.top.width;
tempCanvas.height = this.frame.top.height * this.resizeMultiplyer;

// 将原边框图像缩放到临时Canvas上
tempCtx.drawImage(this.frame.top, 0, 0, tempCanvas.width, tempCanvas.height);

// 使用缩放后的临时Canvas创建重复图案
const pattern = this.context.createPattern(tempCanvas, 'repeat');

// 填充顶部边框区域，高度用缩放后的数值
this.context.fillStyle = pattern;
this.context.fillRect(0, 0, this.canvas.width, tempCanvas.height);

说明 #

这样做之后，你的边框图像会先被缩放到目标尺寸，再作为重复图案填充到指定区域，就不会出现图像截断的问题了。如果你的边框需要同时缩放宽度，只需要把tempCanvas.width也设置为this.frame.top.width * this.resizeMultiplyer即可，保证宽高比一致。

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