在 web 前端开发中，HTML Canvas 是一个非常强大的工具，可以用来绘制各种图形和动画。其中，createPattern() 方法是一个非常有用的方法，它允许我们创建一个填充样式，该样式是由一个指定的图片和重复方式组成的。
语法
CanvasRenderingContext2D.createPattern(image, repetition);
- image：指定要使用的图片，可以是一个 Image 对象、Canvas 对象或 Video 对象。
- repetition：指定如何重复图像。可以是以下值之一：
- "repeat"：默认值。图像在水平和垂直方向重复。
- "repeat-x"：图像在水平方向重复。
- "repeat-y"：图像在垂直方向重复。
- "no-repeat"：图像不重复，只显示一次。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------- --------------- ------------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
--- --- - --- --------
------- - --------------
---------- - ---------- -
--- ------- - ---------------------- ----------
------------- - --------
--------------- -- ------------- ---------------
--
---------
-------
-------在上面的示例中，我们首先创建了一个 canvas 元素，并获取了其 2D 上下文。然后，我们创建了一个 Image 对象，并指定了要使用的图片。在图片加载完成后，我们使用 createPattern() 方法创建了一个填充样式，并将其应用到 canvas 上。
应用场景
createPattern() 方法通常用于创建复杂的填充样式，比如纹理、背景图案等。通过指定不同的重复方式，我们可以实现各种独特的效果。
总的来说，HTML Canvas 的 createPattern() 方法为我们提供了一个非常灵活和强大的方式来处理图像填充，使我们能够轻松地实现各种视觉效果。希望本文对你有所帮助！