javascript - 设置 Canvas 图案图像的高度

Question

我正在围绕一些图像绘制框架。

这是我绘制顶部框架的代码:

this.frame.top.height = this.frame.top.height * this.resizeMultiplyer
const pattern = this.context.createPattern(this.frame.top, 'repeat');
console.log(this.frame.top.height);

console.log(this.frame.top.height);
this.context.fillStyle = pattern;
this.context.fillRect(0, 0, this.canvas.width, this.frame.top.height);

我的目标是使用值介于 0 和 1 之间的 resizeMultiplyer 来调整不同情况下的帧宽度。

框架正在绘制，但调整大小乘数适用于框架绘制，但框架图像未调整大小。所以我的形象基本上就被切断了。我附上使用上述代码得到的输出

我得到的输出:

Output I'm getting

预期输出:
Output Expected

Answer 1

没有用图像制作图案，而是创建了另一个具有所需高度和宽度的 Canvas ，并在其中绘制了图像。然后使用该 Canvas 创建图案。