Javascript 在Html5画布中更改模式大小

我的问题：我有一个ImageObject，用于创建PatternObject。我的问题是，在创建图案之前，我更改了图像的

宽度

和

高度

属性，但实际上并没有重新映射图像（这也没有问题）。问题是，我现在得到了一个模式，它的大小（原始图像大小）与图像本身不同。如果我想用那个图案的填充样式画一条线，它就不合适（因为我需要一个新尺寸的图案）

我的问题：有没有一种简单的方法可以实现图案的宽度和高度可以调整

我的尝试以及我不喜欢它们的原因：

1） 将原始图像渲染到具有新大小的画布上，并从中创建图案。未使用此选项，因为由于画布创建和渲染速度太慢，无法直接加载图案。但我直接想要那个图案

2） 计算新图像大小与原始图像大小之间的差异，更改上下文的线宽，使图案高度精确匹配，并缩小线条，使其具有良好的大小。我没有使用它，因为我是实时渲染的，这太慢了，不能在以后的webapps中使用。

使用画布（步骤1）是最灵活的方法

使用画布在另一个画布上绘制并不比直接使用图像慢。它们都使用相同的元素基础（就像处理图像一样，您正在对位图进行blitting）

（更新：在较新的浏览器中，使用模式作为样式的绘图确实要经过模式的本地转换矩阵的额外步骤。）

以图案大小创建一个新画布，并简单地将图像绘制到其中：

patternCtx.drawImage(img, 0, 0, patternWidth, patternHeight);

然后使用patternCtx的画布作为图案的基础（第一次绘制时，图案会在内部缓存该图像，如果可能的话，从那里开始，它只会加倍它所拥有的内容，直到整个画布都填满为止）

另一个选项是将图像预缩放到您需要的所有大小，全部加载，然后选择您需要的图像大小

第三是自己画一个图案。然而，与内置方法相比，这并不是那么有效，尽管使用上述方法（内部）可以获得可用的结果

手动图案的示例：

var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.onload=函数（）{
填充模式（这个，64，64）；
change.onchange=change.oninput=function（）{
填充模式（img，this.value，this.value）；
}
};
img.src=“//i.stack.imgur.com/tkBVh.png”；
//用大小为w、h的图案填充画布
函数填充模式（img、w、h）{
//抽一次
ctx.drawImage（img，0，0，w，h）；
而（宽度<画布宽度）{
ctx.drawImage（画布，w，0）；
w+1很高兴您给了我这么多选项，我会再次尝试第一个选项，我的问题是，如果我在新定义的画布上绘制图案，然后尝试从中加载图案，图案可能无法加载，因为画布尚未准备好加载。@Theone's No problem。原因更可能是图像未完成加载。您可以钩住图像的onload事件，然后触发模式设置等。这个片段非常有用！+1