在 Web 前端开发中，HTML5 的 canvas 元素为我们提供了一个强大的绘图 API，通过它我们可以在网页上绘制各种图形、动画等内容。其中，createPattern() 方法是一个非常有用的方法，它允许我们在 canvas 上使用图像或者其他 canvas 元素作为填充样式。
语法
CanvasRenderingContext2D.createPattern(image, repetition);
image参数可以是一个<img>元素、<video>元素或者另一个 canvas 元素。这个参数指定了要使用的图像或者其他 canvas 元素。repetition参数是一个字符串，指定了填充样式的重复方式。可以是"repeat"、"repeat-x"、"repeat-y"或者"no-repeat"。
示例
下面是一个简单的示例，演示了如何使用 createPattern() 方法在 canvas 上绘制一个背景图案：
-- -------------------- ---- -------
--------- -----
------
------
------------- --------------- ----------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
--- --- - --- --------
------- - --------------
---------- - ---------- -
--- ------- - ---------------------- ----------
------------- - --------
--------------- -- ------------- ---------------
--
---------
-------
-------在这个示例中，我们首先创建了一个 canvas 元素，并获取了它的 2D 上下文。然后，我们创建了一个新的 Image 对象，并将要使用的背景图案加载到这个对象中。当图像加载完成后，我们使用 createPattern() 方法创建了一个填充样式，并将其应用到 canvas 上。
注意事项
- 使用
createPattern()方法创建的填充样式是一种不可修改的样式，一旦创建后就无法更改。如果需要更改样式，需要重新创建一个新的填充样式。 - 图像或者其他 canvas 元素作为填充样式时，会根据指定的重复方式进行平铺。如果图像大小不足以填满整个 canvas，会重复显示图像以填满剩余空间。
- 当使用
createPattern()方法创建填充样式时，图像会以原始大小进行平铺，不会进行缩放。
通过 createPattern() 方法，我们可以轻松地在 canvas 上实现各种复杂的背景图案或者纹理效果，为我们的网页增添视觉吸引力。希望这篇文章能够帮助你更好地理解和使用这个方法。