1# CanvasPattern
2
3一个Object对象，使用[createPattern](ts-canvasrenderingcontext2d.md#createpattern)方法创建，通过指定图像和重复方式创建图片填充的模板。
4
5>  **说明：**
6>
7>  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 方法
10
11### setTransform
12
13setTransform(transform?: Matrix2D): void
14
15使用Matrix2D对象作为参数、对当前CanvasPattern进行矩阵变换。
16
17**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名      | 类型  | 必填 | 说明   |
26| --------- | -------------- | ------ | ---------- |
27| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否  | 转换矩阵。<br>默认值：null。 |
28
29**示例：**
30
31```ts
32// xxx.ets
33@Entry
34@Component
35struct CanvasPatternPage {
36  private settings: RenderingContextSettings = new RenderingContextSettings(true)
37  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
38  private matrix: Matrix2D = new Matrix2D()
39  private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
40  private pattern : CanvasPattern | null = null
41
42  build() {
43      Column() {
44        Button("Click to set transform")
45          .onClick(() => {
46            this.matrix.scaleY = 1
47            this.matrix.scaleX = 1
48            this.matrix.translateX = 50
49            this.matrix.translateY = 200
50            if (this.pattern) {
51              this.pattern.setTransform(this.matrix)
52            }
53            this.context.fillRect(0, 0, 480, 720)
54          })
55          .width("45%")
56          .margin("5px")
57        Canvas(this.context)
58          .width('100%')
59          .height('80%')
60          .backgroundColor('#FFFFFF')
61          .onReady(() => {
62            this.pattern = this.context.createPattern(this.img, 'no-repeat')
63            this.matrix.scaleY = 0.5
64            this.matrix.scaleX = 0.5
65            this.matrix.translateX = 50
66            this.matrix.translateY = 50
67            if (this.pattern) {
68              this.context.fillStyle = this.pattern
69              this.pattern.setTransform(this.matrix)
70            }
71            this.context.fillRect(0, 0, 480, 720)
72          })
73      }
74      .width('100%')
75      .height('100%')
76  }
77}
78```
79
80![CanvasPattern](./figures/canvas_pattern.gif)
81