# CanvasRenderingContext2D对象

> phone | 2in1 | tablet | tv | wearable | lite_wearable

> 说明
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

使用CanvasRenderingContext2D在[canvas组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvas)上进行绘制，绘制对象可以是矩形、文本、图片等。

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="handleClick" onclick="handleClick" />
  <input type="button" style="width: 180px; height: 60px;" value="antialias" onclick="antialias" />
</div>
```

```js
// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas1;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke();
  },
  antialias() {
    const el = this.$refs.canvas1;
    const ctx = el.getContext('2d', { antialias: true });
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke();
  }
}
```

* 示意图（关闭抗锯齿）

  ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5d/v3/wLxp5F-qTdmeB79e85Iqzg/zh-cn_image_0000002771827944.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=E65277CD72529DF854034219AE1B82ABB21A3E0C88AE6B166F281FA8752C934D)
* 示意图（开启抗锯齿）

  ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a0/v3/y5Z4bqCuTNairwxB951dNw/zh-cn_image_0000002801107755.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=BC1C9B11927BA6DBE33A6D70C26EC6D6673DE0EF1ECD85EA61F948CC43AFBB80)

## 属性

> phone | 2in1 | tablet | tv | wearable | lite_wearable

|名称|类型|描述|
|:----------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|[fillStyle](#fillstyle)|<color> | [CanvasGradient](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasgradient) | [CanvasPattern](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-canvaspattern)|指定绘制的填充色。 - 类型为<color>时，表示设置填充区域的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。 - 类型为CanvasPattern时，使用 createPattern()方法创建。 超出取值范围填充为黑色。|
|[lineWidth](#linewidth)|number|设置绘制线条的宽度。|
|[strokeStyle](#strokestyle)|<color> | [CanvasGradient](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasgradient) | [CanvasPattern](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-canvaspattern)|设置描边的颜色。 - 类型为<color>时，表示设置描边使用的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。 - 类型为CanvasPattern时，使用 createPattern()方法创建。|
|[lineCap](#linecap)|string|指定线端点的样式，可选值为： - butt：线端点以方形结束。 - round：线端点以圆形结束。 - square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 默认值：butt|
|[lineJoin](#linejoin)|string|指定线段间相交的交点样式，可选值为： - round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 - bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。 - miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 默认值：miter|
|[miterLimit](#miterlimit)|number|设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 默认值：10|
|[font](#font)|string|设置文本绘制中的字体样式。 语法：ctx.font="font-style font-weight font-size font-family"^5+^ - font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。 - font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。 - font-size(可选)，指定字号和行高，单位只支持px。 - font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。 默认值："normal normal 14px sans-serif"|
|[textAlign](#textalign)|string|设置文本绘制中的文本对齐方式，可选值为： - left：文本左对齐。 - right：文本右对齐。 - center：文本居中对齐。 - start：文本对齐界线开始的地方。 - end：文本对齐界线结束的地方。 ltr布局模式下start和left一致，rtl布局模式下start和right一致。 默认值：left|
|[textBaseline](#textbaseline)|string|设置文本绘制中的基线对齐方式，可选值为： - alphabetic：文本基线是标准的字母基线。 - top：文本基线在文本块的顶部。 - hanging：文本基线是悬挂基线。 - middle：文本基线在文本块的中间。 - ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideographic基线位置在字符本身的底部。 - bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 默认值： alphabetic|
|[globalAlpha](#globalalpha)|number|设置透明度。 范围为[0.0, 1.0]，0.0为完全透明，1.0为完全不透明。若给定值小于0.0，则取值0.0；若给定值大于1.0，则取值1.0。|
|[lineDashOffset](#linedashoffset)|number|设置画布的虚线偏移量，精度为float。 默认值：0.0|
|[globalCompositeOperation](#globalcompositeoperation)|string|设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考[类型字段说明](#globalcompositeoperation)。 默认值：source-over|
|[shadowBlur](#shadowblur)|number|设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 默认值：0.0|
|[shadowColor](#shadowcolor)|<color>|设置绘制阴影时的阴影颜色。|
|[shadowOffsetX](#shadowoffsetx)|number|设置绘制阴影时和原有对象的水平偏移值。|
|[shadowOffsetY](#shadowoffsety)|number|设置绘制阴影时和原有对象的垂直偏移值。|
|[imageSmoothingEnabled](#imagesmoothingenabled)|boolean|用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 默认值：true|

### fillStyle

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = '#0000ff';
    ctx.fillRect(20, 20, 150, 100);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/47/v3/iFcSJeJfSBKI5OM9eAtA0w/zh-cn_image_0000002771667976.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=11AD3520E255B6EB571F3EB1CE33963821D21B5475F7A9CDB8F04411123FA02F)

### lineWidth

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 5;
    ctx.strokeRect(25, 25, 85, 105);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ef/v3/mfLwLR_vTXKLGSbzLDw5bQ/zh-cn_image_0000002800987835.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=2C3D8B63DE0D8A2A5F55706DBA69492F3C5301F1CF509AC0D8B9088C0A3556E1)

### strokeStyle

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#0000ff';
    ctx.strokeRect(25, 25, 155, 105);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ff/v3/E5vm2uUXTuus310tu1je-g/zh-cn_image_0000002771827946.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=2DE21E4CC44A6AE5EFE1B251C389B1B5BE6AB28736E80F288A4D23D38550D669)

### lineCap

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 8;
    ctx.beginPath();
    ctx.lineCap = 'round';
    ctx.moveTo(30, 50);
    ctx.lineTo(220, 50);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/q2XGPYjvSD6z2ABpCQx_Tw/zh-cn_image_0000002801107757.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=AB3E8166E8B3843453763705998DA7FCFE35D9AF0F08443E43A7933750A784AD)

### lineJoin

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.lineWidth = 8;
    ctx.lineJoin = 'miter';
    ctx.moveTo(30, 30);
    ctx.lineTo(120, 60);
    ctx.lineTo(30, 110);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/66/v3/Zqaam_MSSYuG43K6VREpyg/zh-cn_image_0000002771667978.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=9A045104299007611E045876D36729C3DF8E405CA9ADFE78770AC08BF543C7EB)

### miterLimit

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 14;
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 3;
    ctx.moveTo(30, 30);
    ctx.lineTo(120, 60);
    ctx.lineTo(30, 70);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8e/v3/HXUmUZ-1RRynearsaNJHWw/zh-cn_image_0000002800987837.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=E57C18396EB7C048913F272C3EB0F33534DC12BAE8BD946A56F75A2750BC50F3)

### font

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '30px sans-serif';
    ctx.fillText("Hello World", 20, 60);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e3/v3/evn-JU5QTSmL-0l0VEJU4A/zh-cn_image_0000002771827948.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=A53CB2FE7A0FDEBB2247EAA12AF74D0365A5A844450807C68E57921CD94640BF)

### textAlign

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(140, 10);
    ctx.lineTo(140, 160);
    ctx.stroke();
    ctx.font = '18px sans-serif';
    // Show the different textAlign values
    ctx.textAlign = 'start';
    ctx.fillText('textAlign=start', 140, 60);
    ctx.textAlign = 'end';
    ctx.fillText('textAlign=end', 140, 80);
    ctx.textAlign = 'left';
    ctx.fillText('textAlign=left', 140, 100);
    ctx.textAlign = 'center';
    ctx.fillText('textAlign=center',140, 120);
    ctx.textAlign = 'right';
    ctx.fillText('textAlign=right',140, 140);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/rShBCfzkRIG1z2mvaBAN1Q/zh-cn_image_0000002801107759.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=867F6F6DC4AFF799E5AB6A905490A10867CCDB83596A8A0D24F834CDA5021D4A)

### textBaseline

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(0, 120);
    ctx.lineTo(400, 120);
    ctx.stroke();
    ctx.font = '20px sans-serif';
    ctx.textBaseline = 'top';
    ctx.fillText('Top', 10, 120);
    ctx.textBaseline = 'bottom';
    ctx.fillText('Bottom', 55, 120);
    ctx.textBaseline = 'middle';
    ctx.fillText('Middle', 125, 120);
    ctx.textBaseline = 'alphabetic';
    ctx.fillText('Alphabetic', 195, 120);
    ctx.textBaseline = 'hanging';
    ctx.fillText('Hanging', 295, 120);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1c/v3/BNpy7r3eSeyW89FlSr2VQQ/zh-cn_image_0000002771667980.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=6C5721F58E31B07B10C26FA1C3321D09FEB5485DFC02245BCD6CB00C13BF5C96)

### globalAlpha

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(0, 0, 50, 50);
    ctx.globalAlpha = 0.4;
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(50, 50, 50, 50);

  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0c/v3/gCt4XRerSUOWw4ELGhc8Bg/zh-cn_image_0000002800987839.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=F95C31FE99859C341001DDACDA72628668C5F922784E9FBA8DF08181806DFA70)

### lineDashOffset

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.setLineDash([10, 20]);
    ctx.lineDashOffset = 10.0;
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/BoHWHRCdRPeFiIB46lUX4g/zh-cn_image_0000002771827950.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=18FCE7552925F04E385B801E68750A53D26C05AB6DF6BB92059D8ADB8680CAFF)

### globalCompositeOperation

> phone | 2in1 | tablet | tv | wearable | lite_wearable

类型字段说明。

|值|描述|
|:---------------|:-----------------------|
|source-over|在现有绘制内容上显示新绘制内容，属于默认值。|
|source-atop|在现有绘制内容顶部显示新绘制内容。|
|source-in|在现有绘制内容中显示新绘制内容。|
|source-out|在现有绘制内容之外显示新绘制内容。|
|destination-over|在新绘制内容上方显示现有绘制内容。|
|destination-atop|在新绘制内容顶部显示现有绘制内容。|
|destination-in|在新绘制内容中显示现有绘制内容。|
|destination-out|在新绘制内容外显示现有绘制内容。|
|lighter|显示新绘制内容和现有绘制内容。|
|copy|显示新绘制内容而忽略现有绘制内容。|
|xor|使用异或操作对新绘制内容与现有绘制内容进行融合。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(20, 20, 50, 50);
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(50, 50, 50, 50);
    // Start drawing second example
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(120, 20, 50, 50);
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(150, 50, 50, 50);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/28/v3/KGkuzvNoRPSXidMqfRkafg/zh-cn_image_0000002801107761.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=458F374916769B5EAF32214171F5A50AC019E66E80093C76E0AB5EE835443BAA)

示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。

### shadowBlur

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 30;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(20, 20, 100, 80);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/90/v3/VD1Cy1_4QhOOvlITZkI5SA/zh-cn_image_0000002771667982.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=4A39C3A603ED2B57FD5EE07006F93248E6CE6E0AE96D9D5612ACA76FFAB80D3E)

### shadowColor

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 30;
    ctx.shadowColor = 'rgb(0,0,255)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(30, 30, 100, 100);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/78/v3/giF6BaeCQoqEKcSRzQ2KQA/zh-cn_image_0000002800987841.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=8A87E920C9CE8AAF20D49D0D81D288488CC3980349319A2480C9D85398DBD80C)

### shadowOffsetX

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 20;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(20, 20, 100, 80);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0b/v3/AfKG68GtTfO0ekjnb1slaw/zh-cn_image_0000002771827952.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0BE7EB2E4E7D74289AD23E13866506B29195CD3115B7D340CD884A7DBEF65FC4)

### shadowOffsetY

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = 20;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(30, 30, 100, 100);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/99/v3/SD05U2lWSM26jNg4Nf1xzg/zh-cn_image_0000002801107763.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=34BE93B888A9718E6F4F8E767E559F51980B5B3923985DB3CB75BA8FE40BBD55)

### imageSmoothingEnabled

> phone | 2in1 | tablet | tv | wearable | lite_wearable

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var img = new Image();
    // 'common/image/example.jpg'需要替换为开发者所需的图像资源文件
    img.src = 'common/image/example.jpg';
    img.onload = function() {
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(img, 0, 0, 400, 200);
    };
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/46/v3/URVcuaxpTPSb-LItPGWeYw/zh-cn_image_0000002771667984.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=84A476B95929BCAB5D3954D9135A2F2222D1564C75D8217EFAC0B066A949AC5C)

## 方法

> phone | 2in1 | tablet | tv | wearable | lite_wearable

### fillRect

> phone | 2in1 | tablet | tv | wearable | lite_wearable

fillRect(x: number, y: number, width:number, height: number): void

填充一个矩形。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:------------------|
|x|number|是|指定矩形左上角点的x坐标。 单位：vp|
|y|number|是|指定矩形左上角点的y坐标。 单位：vp|
|width|number|是|指定矩形的宽度。 单位：vp|
|height|number|是|指定矩形的高度。 单位：vp|

**示例：**

```html
  <!-- xxx.hml -->
  <div>
    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  </div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillRect(20, 20, 200, 150);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1b/v3/GtOT9YieTm6X--euC7p5XA/zh-cn_image_0000002800987843.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=740F3CE4B06D6BE556F9DFDF8C785E96B2D40A7BD8C69EDC38CA46191388E3A5)

### clearRect

> phone | 2in1 | tablet | tv | wearable | lite_wearable

clearRect(x: number, y: number, width:number, height: number): void

删除指定区域内的绘制内容。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:------------------|
|x|number|是|指定矩形上的左上角x坐标。 单位：vp|
|y|number|是|指定矩形上的左上角y坐标。 单位：vp|
|width|number|是|指定矩形的宽度。 单位：vp|
|height|number|是|指定矩形的高度。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(100, 100, 200, 200);
    ctx.clearRect(110, 110, 80, 50);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/28/v3/uQFfELp_Rpq229qrzxpjPg/zh-cn_image_0000002771827954.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=7E16C1689E3EDF892DF1C435B2933341499E8FE81DC06AF21B2995839DCAADC7)

### strokeRect

> phone | 2in1 | tablet | tv | wearable | lite_wearable

strokeRect(x: number, y: number, width:number, height: number): void

绘制具有边框的矩形，矩形内部不填充。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:-----------------|
|x|number|是|指定矩形的左上角x坐标。 单位：vp|
|y|number|是|指定矩形的左上角y坐标。 单位：vp|
|width|number|是|指定矩形的宽度。 单位：vp|
|height|number|是|指定矩形的高度。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeRect(100, 100, 200, 150);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/81/v3/nDZIMMKuRwy9qNU805y6VA/zh-cn_image_0000002801107765.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=7D5486E341D996E07C9FDB6B897CC347D35649494077859A8DB52E2CA497104A)

### fillText

> phone | 2in1 | tablet | tv | wearable | lite_wearable

fillText(text: string, x: number, y: number): void

绘制填充类文本。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:--------------------|
|text|string|是|需要绘制的文本内容。|
|x|number|是|需要绘制的文本的左下角x坐标。 单位：vp|
|y|number|是|需要绘制的文本的左下角y坐标。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '35px sans-serif';
    ctx.fillText("Hello World!", 10, 60);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8a/v3/uQ28aip_RNK2q_ajx2XgYg/zh-cn_image_0000002771667986.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=B8801FB2D24B38B97D34F855FADB482BD28214679AFD8C798792322725B23F29)

### strokeText

> phone | 2in1 | tablet | tv | wearable | lite_wearable

strokeText(text: string, x: number, y: number): void

绘制描边类文本。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:--------------------|
|text|string|是|需要绘制的文本内容。|
|x|number|是|需要绘制的文本的左下角x坐标。 单位：vp|
|y|number|是|需要绘制的文本的左下角y坐标。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '25px sans-serif';
    ctx.strokeText("Hello World!", 10, 60);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d8/v3/pR64b08xRoa5B4Nno0z8yA/zh-cn_image_0000002800987845.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=E7EBD779034A15347AE9E6D16A0DBC8015D534BC15E696A62D689BC0202D93F5)

### measureText

> phone | 2in1 | tablet | tv | wearable | lite_wearable

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:---------|
|text|string|是|需要进行测量的文本。|

**返回值：**

|类型|说明|
|:----------|:-------------------------------------|
|TextMetrics|包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '20px sans-serif';
    var txt = 'Hello World';
    ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
    ctx.fillText(txt, 20, 110);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4b/v3/ElCNbmG5TbSZKhFDRpB0-Q/zh-cn_image_0000002771827956.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=3E37CCF6A7329CD828DE43684A5520AFFF09CA91EAF4F9D72618727D240E5396)

### stroke

> phone | 2in1 | tablet | tv | wearable | lite_wearable

stroke(): void

进行边框绘制操作。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.moveTo(25, 25);
    ctx.lineTo(25, 250);
    ctx.lineWidth = 6;
    ctx.strokeStyle = 'rgb(0,0,255)';
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0c/v3/aB1rBEkVTPeOzNbLsC5-QA/zh-cn_image_0000002801107767.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=174AD60A6CB404B60EBF4B1EFECBD3441CD14C4068AB5BFDAE0B784368B99ABD)

### beginPath

> phone | 2in1 | tablet | tv | wearable | lite_wearable

beginPath(): void

创建一个新的绘制路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.lineWidth = 6;
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(15, 80);
    ctx.lineTo(280, 80);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/28/v3/R-4Gc6K2RoOoQeppvaNq0Q/zh-cn_image_0000002771667988.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=F5027636D22E58C8C98A10DDF9BE5763A29FFA198DCA1C84223F3DC0BCBE8B09)

### moveTo

> phone | 2in1 | tablet | tv | wearable | lite_wearable

moveTo(x: number, y: number): void

路径从当前点移动到指定点。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:--------------|
|x|number|是|指定位置的x坐标。 单位：vp|
|y|number|是|指定位置的y坐标。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(280, 160);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/82/v3/B0r3lop3Q82J5NiaMud9Gg/zh-cn_image_0000002800987847.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=DA0D5D8738F61BACD5AA951D0023C5FDDFB350993C92C5C4D7E12E37559FAAB2)

### lineTo

> phone | 2in1 | tablet | tv | wearable | lite_wearable

lineTo(x: number, y: number): void

从当前点到指定点进行路径连接。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:--------------|
|x|number|是|指定位置的x坐标。 单位：vp|
|y|number|是|指定位置的y坐标。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(280, 160);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/97/v3/QEtrRE9BS-m3HCLFEWeVpA/zh-cn_image_0000002771827958.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0D8563020E18DD84C39FD0C72939867B0F4687C8E115712AE8A25DC7DADD48F3)

### closePath

> phone | 2in1 | tablet | tv | wearable | lite_wearable

closePath(): void

结束当前路径形成一个封闭路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(110, 30);
    ctx.lineTo(70, 90);
    ctx.closePath();
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1c/v3/9bb9lE4IS5W-azKXTIoNuQ/zh-cn_image_0000002801107769.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=B8F3AD35EB9CEB6CD4CBDBCABEF5B379FEAF1D40B23B9F7F8958959DB797B52C)

### createPattern

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createPattern(image: Image, repetition: string): Object

通过指定图像和重复方式创建图片填充的模板。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---------|:-----|:-|:----------------------------------------------------------------------------------------------------------------|
|image|Image|是|图源对象，具体参考[Image对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-image)。|
|repetition|string|是|设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。|

**返回值：**

|类型|说明|
|:-----|:----------------|
|Object|指定图像填充的Pattern对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var img = new Image();
    // 'common/images/example.jpg'需要替换为开发者所需的图像资源文件
    img.src = 'common/images/example.jpg';
    var pat = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pat;
    ctx.fillRect(0, 0, 500, 500);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/63/v3/5_atZfvWQ_ynB4hr7gsc-g/zh-cn_image_0000002771667990.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=D7F070BBCC93019EE21659437909739C7B3B6308A7A49E984CD5A05CF213652E)

### bezierCurveTo

> phone | 2in1 | tablet | tv | wearable | lite_wearable

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

创建三次贝塞尔曲线的路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:-------------------|
|cp1x|number|是|第一个贝塞尔参数的x坐标值。 单位：vp|
|cp1y|number|是|第一个贝塞尔参数的y坐标值。 单位：vp|
|cp2x|number|是|第二个贝塞尔参数的x坐标值。 单位：vp|
|cp2y|number|是|第二个贝塞尔参数的y坐标值。 单位：vp|
|x|number|是|路径结束时的x坐标值。 单位：vp|
|y|number|是|路径结束时的y坐标值。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a9/v3/TiaLs3_ZQZy2qWanQ9Phng/zh-cn_image_0000002800987849.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=F4103EB581B60E7DCA42DF099D8666F792C869282B63D6904787B4936BEE5C6D)

### quadraticCurveTo

> phone | 2in1 | tablet | tv | wearable | lite_wearable

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

创建二次贝塞尔曲线的路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:----------------|
|cpx|number|是|贝塞尔参数的x坐标值。 单位：vp|
|cpy|number|是|贝塞尔参数的y坐标值。 单位：vp|
|x|number|是|路径结束时的x坐标值。 单位：vp|
|y|number|是|路径结束时的y坐标值。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.quadraticCurveTo(100, 100, 200, 20);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/af/v3/yIcl2o1-RDqRAPYEGSqheQ/zh-cn_image_0000002771827960.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=5DB8A777547B8D33F5D5D613770961495738D6A1383F5A7574FF257FDF1A60C0)

### arc

> phone | 2in1 | tablet | tv | wearable | lite_wearable

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

绘制弧线路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---------------|:------|:-|:--------------------------------------|
|x|number|是|弧线圆心的x坐标值。 单位：vp|
|y|number|是|弧线圆心的y坐标值。 单位：vp|
|radius|number|是|弧线的圆半径。 单位：vp|
|startAngle|number|是|弧线的起始弧度。 单位：弧度|
|endAngle|number|是|弧线的终止弧度。 单位：弧度|
|counterclockwise|boolean|否|是否逆时针绘制圆弧，true为逆时针，false为顺时针。 默认值：false|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cf/v3/04cAMPMMQ0GIC55KAdkSKA/zh-cn_image_0000002801107771.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=067E4280B6CBC5A13CF9263EC6EBDC812A3CBBDF222C3AB372459413B8B49797)

### arcTo

> phone | 2in1 | tablet | tv | wearable | lite_wearable

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

依据圆弧经过的点和圆弧半径创建圆弧路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:--------------------|
|x1|number|是|圆弧经过的第一个点的x坐标值。 单位：vp|
|y1|number|是|圆弧经过的第一个点的y坐标值。 单位：vp|
|x2|number|是|圆弧经过的第二个点的x坐标值。 单位：vp|
|y2|number|是|圆弧经过的第二个点的y坐标值。 单位：vp|
|radius|number|是|圆弧的圆半径值。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.moveTo(100, 20);
    ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bf/v3/oMCMBwbRTFSBetyMMQdDgQ/zh-cn_image_0000002771667992.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=7B7B1627E1C8C10B56959207E6E8E133B73CA41A8E3A8D8A79FA0E30FED6A7D1)

### ellipse

> phone | 2in1 | tablet | tv | wearable | lite_wearable

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: number): void

在规定的矩形区域绘制一个椭圆。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---------------|:-----|:-|:------------------------------------------|
|x|number|是|椭圆圆心的x轴坐标。 单位：vp|
|y|number|是|椭圆圆心的y轴坐标。 单位：vp|
|radiusX|number|是|椭圆x轴的半径长度。 单位：vp|
|radiusY|number|是|椭圆y轴的半径长度。 单位：vp|
|rotation|number|是|椭圆的旋转角度。 单位：弧度|
|startAngle|number|是|椭圆绘制的起始点角度。 单位：弧度|
|endAngle|number|是|椭圆绘制的结束点角度。 单位：弧度|
|counterclockwise|number|否|是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。其它数值均按默认值处理。 默认值：0|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/QkPXBKRIRDW1eloYL1cXAg/zh-cn_image_0000002800987851.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=20053EC5EFF1877187C876477D980DC48BB722325F852AC324CCAD206FF66C64)

### rect

> phone | 2in1 | tablet | tv | wearable | lite_wearable

rect(x: number, y: number, width: number, height: number): void

创建矩形路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:------------------|
|x|number|是|指定矩形的左上角x坐标值。 单位：vp|
|y|number|是|指定矩形的左上角y坐标值。 单位：vp|
|width|number|是|指定矩形的宽度。 单位：vp|
|height|number|是|指定矩形的高度。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
    ctx.stroke(); // Draw it
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/db/v3/FmL38panTgWxlzIfw9Y-Dw/zh-cn_image_0000002771827962.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=2AE07977B33646D32922DD967EAB9C1D2C917FFC9859257DFB4F2192EC9AFE89)

### fill

> phone | 2in1 | tablet | tv | wearable | lite_wearable

fill(): void

对封闭路径进行填充。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
    ctx.fill(); // Draw it in default setting
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/81/v3/pNWDDdEZSZS3kYMER4qnLA/zh-cn_image_0000002801107773.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=60F200AE3184D26BCE344CD198A80611227B7E51EE34D7FF7B11E5FFD3512B9E)

### clip

> phone | 2in1 | tablet | tv | wearable | lite_wearable

clip(): void

设置当前路径为剪切路径。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(100, 100, 200, 200);
    ctx.stroke();
    ctx.clip();
    // Draw red rectangle after clip
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect(100, 100, 150, 150);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d5/v3/W5WIzd75Q-WWuUCZb5PiYw/zh-cn_image_0000002771667994.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=8F1972AB734F06909C59AEAEB5987681D2974486384FDD541563A2CD0AE52369)

### rotate

> phone | 2in1 | tablet | tv | wearable | lite_wearable

rotate(rotate: number): void

针对当前坐标轴进行顺时针旋转。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:--------------------------------------------|
|rotate|number|是|设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 单位：弧度|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
    ctx.fillRect(70, 20, 50, 50);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/83/v3/TAf_sI6iSUGmyxFyZd1BBA/zh-cn_image_0000002800987853.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0535E019CCB1FADD0D8F1784D32A3EACDEE2CE425C6E321518D5F0145ADF9FA9)

### scale

> phone | 2in1 | tablet | tv | wearable | lite_wearable

scale(x: number, y: number): void

设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:----------|
|x|number|是|设置水平方向的缩放值。|
|y|number|是|设置垂直方向的缩放值。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeRect(10, 10, 25, 25);
    ctx.scale(2, 2);// Scale to 200%
    ctx.strokeRect(10, 10, 25, 25);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6/v3/xYEfed1USG2c4o_GxxIa6w/zh-cn_image_0000002771827964.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=D80AB1430C1237B688F0609ABE212054E1808A82275CEE1D5A4FE5F5E26A1F70)

### transform

> phone | 2in1 | tablet | tv | wearable | lite_wearable

transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void

transform方法对应一个变换矩阵，当需要对一个图形进行变换的时候，只要设置此变换矩阵相应的参数，对图形的各个顶点的坐标分别乘以这个矩阵，就能得到新的顶点的坐标。矩阵变换效果可叠加。
> 说明
>
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> * x' = scaleX * x + skewY * y + translateX
>
> * y' = skewX * x + scaleY * y + translateY

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---------|:-----|:-|:-------------|
|scaleX|number|是|指定水平缩放值。|
|skewX|number|是|指定水平倾斜值。|
|skewY|number|是|指定垂直倾斜值。|
|scaleY|number|是|指定垂直缩放值。|
|translateX|number|是|指定水平移动值。 单位：vp|
|translateY|number|是|指定垂直移动值。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillRect(0, 0, 100, 100);
    ctx.transform(1, 0.5, -0.5, 1, 10, 10);
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(0, 0, 100, 100);
    ctx.transform(1, 0.5, -0.5, 1, 10, 10);
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(0, 0, 100, 100);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/wTLD1Bh9R1K68mDw3wDUQg/zh-cn_image_0000002801107775.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0A5DE4C82F954D727BF64A3306DCBDCD980BCF685193879645D98BB097C21643)

### setTransform

> phone | 2in1 | tablet | tv | wearable | lite_wearable

setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void

setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---------|:-----|:-|:-------------|
|scaleX|number|是|指定水平缩放值。|
|skewX|number|是|指定水平倾斜值。|
|skewY|number|是|指定垂直倾斜值。|
|scaleY|number|是|指定垂直缩放值。|
|translateX|number|是|指定水平移动值。 单位：vp|
|translateY|number|是|指定垂直移动值。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(0, 0, 100, 100);
    ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(0, 0, 100, 100);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4e/v3/Mx6-ErtVQ-OZkjEYr0eCZA/zh-cn_image_0000002771667996.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=32FE34A7CC85E12474EDBC97F6A0B00731705316C92F32DEE4D18762D8D2283A)

### translate

> phone | 2in1 | tablet | tv | wearable | lite_wearable

translate(x: number, y: number): void

移动当前坐标系的原点。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:-------------|
|x|number|是|设置水平平移量。 单位：vp|
|y|number|是|设置竖直平移量。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillRect(10, 10, 50, 50);
    ctx.translate(70, 70);
    ctx.fillRect(10, 10, 50, 50);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8c/v3/hmwC_zhnQpu0qCZD-1BBqQ/zh-cn_image_0000002800987855.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=4CB209C5B9F98E2306C7DEBD289F9A71B7E8F25B5D60F4E0B8A454B7672E743F)

### createPath2D

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createPath2D(path?: Path2D): Path2D

创建一个Path2D对象。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:------------------------|
|path|Path2D|否|Path2D对象。 默认值：空的Path2D对象。|

**返回值：**

|类型|说明|
|:-----|:--------------------------------------------------------------------------------------------------------------|
|Path2D|返回创建的[Path2D对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-path2d)。|

### createPath2D

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createPath2D(cmds?: string): Path2D

创建一个Path2D对象。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:-----|:-|:---------------------|
|cmds|string|否|SVG的Path描述字符串。 默认值：""。|

**返回值：**

|类型|说明|
|:-----|:--------------------------------------------------------------------------------------------------------------|
|Path2D|返回创建的[Path2D对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-path2d)。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var path1 = ctx.createPath2D();
    path1.moveTo(100, 100);
    path1.lineTo(200, 100);
    path1.lineTo(100, 200);
    path1.closePath();
    ctx.stroke(path1);
    var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z");
    ctx.stroke(path2);
    var path3 = ctx.createPath2D(path2);
    ctx.stroke(path3);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e9/v3/_y2jPHu-QQeINnacTpHPZw/zh-cn_image_0000002771827966.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=9054F97CD8F39832D7ACFBFE165C5807607EDE52525E9F449D5AAA8350F4F165)

### drawImage

> phone | 2in1 | tablet | tv | wearable | lite_wearable

drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void

进行图像绘制。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:------|:-------------------|:-|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|image|Image | PixelMap^9+^|是|图片资源，请参考[Image对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-image) 或[PixelMap](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-pixelmap)对象。|
|sx|number|是|裁切源图像时距离源图像左上角的x坐标值。 单位：vp|
|sy|number|是|裁切源图像时距离源图像左上角的y坐标值。 单位：vp|
|sWidth|number|是|裁切源图像时需要裁切的宽度。 单位：vp|
|sHeight|number|是|裁切源图像时需要裁切的高度。 单位：vp|
|dx|number|是|绘制区域左上角在x轴的位置。 单位：vp|
|dy|number|是|绘制区域左上角在y 轴的位置。 单位：vp|
|dWidth|number|是|绘制区域的宽度。 单位：vp|
|dHeight|number|是|绘制区域的高度。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    var test = this.$refs.canvas;
    var ctx = test.getContext('2d');
    var img = new Image();
    // 'common/image/test.jpg'需要替换为开发者所需的图像资源文件
    img.src = 'common/image/test.jpg';
    ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/65/v3/le-BX56XSuWo0mpyPSsH1Q/zh-cn_image_0000002801107777.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0C77A38116B746E533925007D4ED8CB428954C2EE18DAB4989BB69D708CFCD3D)

### restore

> phone | 2in1 | tablet | tv | wearable | lite_wearable

restore(): void

对保存的绘图上下文进行恢复。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.restore();
  }
}
```

### save

> phone | 2in1 | tablet | tv | wearable | lite_wearable

save(): void

对当前的绘图上下文进行保存。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.save();
  }
}
```

### createLinearGradient^6+^

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient

创建一个线性渐变色，返回[CanvasGradient对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasgradient)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:-------------|
|x0|number|是|起点的x轴坐标。 单位：vp|
|y0|number|是|起点的y轴坐标。 单位：vp|
|x1|number|是|终点的x轴坐标。 单位：vp|
|y1|number|是|终点的y轴坐标。 单位：vp|

**返回值：**

|类型|说明|
|:-------------|:---------------------|
|CanvasGradient|返回创建的CanvasGradient对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
```

```js
// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    // Linear gradient: start(50,0) end(300,100)
    var gradient = ctx.createLinearGradient(50,0, 300,100);
    // Add three color stops
    gradient.addColorStop(0.0, '#ff0000');
    gradient.addColorStop(0.5, '#ffffff');
    gradient.addColorStop(1.0, '#00ff00');
    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 500, 500);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/JLE1srBfTZmif6k5mDrktA/zh-cn_image_0000002771667998.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=0F9DCAEA002415BEB89D9D13037C762C8DA139F1752B44617A382F95B7B32502)

### createRadialGradient^6+^

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient

创建一个径向渐变色，返回[CanvasGradient对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasgradient)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:----------------------|
|x0|number|是|起始圆的x轴坐标。 单位：vp|
|y0|number|是|起始圆的y轴坐标。 单位：vp|
|r0|number|是|起始圆的半径。必须是非负且有限的。 单位：vp|
|x1|number|是|终点圆的x轴坐标。 单位：vp|
|y1|number|是|终点圆的y轴坐标。 单位：vp|
|r1|number|是|终点圆的半径。必须为非负且有限的。 单位：vp|

**返回值：**

|类型|说明|
|:-------------|:---------------------|
|CanvasGradient|返回创建的CanvasGradient对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
```

```js
// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
    var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
    // Add three color stops
    gradient.addColorStop(0.0, '#ff0000');
    gradient.addColorStop(0.5, '#ffffff');
    gradient.addColorStop(1.0, '#00ff00');
    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 500, 500);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/52/v3/64HldF7yREmThh_Kus3cOg/zh-cn_image_0000002800987857.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=40883D6F673FBC601B21E456BB22E68B89A4ABD27B777C952F5DFE16C1C6EA04)

### createImageData

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createImageData(width: number, height: number): ImageData

创建新的、空白的、指定大小的ImageData对象，请参考[ImageData对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:------------------|
|width|number|是|ImageData的宽度。 单位：vp|
|height|number|是|ImageData的高度。 单位：vp|

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------|:----------------|
|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|返回创建的ImageData对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
  }
}
```

### createImageData

> phone | 2in1 | tablet | tv | wearable | lite_wearable

createImageData(imageData: ImageData): ImageData

根据一个现有的ImageData对象，重新创建一个宽、高相同但不会复制图像数据的ImageData对象，请参考[ImageData对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:------------------------------------------------------------------------------------------------------------|:-|:----------------|
|imageData|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|是|复制现有的ImageData对象。|

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------|:----------------|
|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|返回创建的ImageData对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
    var newImageData = ctx.createImageData(imageData);  // Create ImageData using the input imageData
  }
}
```

### getImageData

> phone | 2in1 | tablet | tv | wearable | lite_wearable

getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

以当前canvas指定区域内的像素创建[ImageData对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:--------------------|
|sx|number|是|需要输出的区域的左上角x坐标。 单位：vp|
|sy|number|是|需要输出的区域的左上角y坐标。 单位：vp|
|sw|number|是|需要输出的区域的宽度。 单位：vp|
|sh|number|是|需要输出的区域的高度。 单位：vp|

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------|:----------------------|
|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|返回包含指定区域像素的ImageData对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const test = this.$element('getImageData')
    const ctx = test.getContext('2d');
    var imageData = ctx.getImageData(0, 0, 280, 300);
  }
}
```

### putImageData

> phone | 2in1 | tablet | tv | wearable | lite_wearable

putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void

使用ImageData数据裁剪后填充至新的矩形区域。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----------|:------------------------------------------------------------------------------------------------------------|:-|:----------------------------------|
|imageData|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|是|包含像素值的ImageData对象。|
|dx|number|是|填充区域在x轴方向的偏移量。 单位：vp|
|dy|number|是|填充区域在y轴方向的偏移量。 单位：vp|
|dirtyX|number|是|源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 单位：vp|
|dirtyY|number|是|源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 单位：vp|
|dirtyWidth|number|是|源图像数据矩形裁切范围的宽度。 单位：vp|
|dirtyHeight|number|是|源图像数据矩形裁切范围的高度。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas id="putImageData" style="width: 200px; height: 150px; background-color: #D5D5D5;"></canvas>
</div>
```

```js
// xxx.js
export default {
    onShow() {
        const test = this.$element('putImageData')
        const ctx = test.getContext('2d');
        var imgData = ctx.createImageData(100, 100);
        for (var i = 0; i < imgData.data.length; i += 4) {
            imgData.data[i + 0] = 39;
            imgData.data[i + 1] = 135;
            imgData.data[i + 2] = 217;
            imgData.data[i + 3] = 255;
        }
        ctx.putImageData(imgData, 10, 10, 0, 0, 100, 50);
    }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/SOaRIKWLQV-TzGA05gk2vQ/zh-cn_image_0000002771827968.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=031AAB5404A0CF02EA78511EA0378F3FAFA08320414E6182C04FD49B33F84D97)

### putImageData

> phone | 2in1 | tablet | tv | wearable | lite_wearable

putImageData(imageData: ImageData, dx: number, dy: number): void

使用ImageData数据填充新的矩形区域。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:------------------------------------------------------------------------------------------------------------|:-|:-------------------|
|imageData|[ImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagedata)|是|包含像素值的ImageData对象。|
|dx|number|是|填充区域在x轴方向的偏移量。 单位：vp|
|dy|number|是|填充区域在y轴方向的偏移量。 单位：vp|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas id="putImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const test = this.$element('putImageData')
    const ctx = test.getContext('2d');
    var imgData = ctx.createImageData(100, 100);
    for (var i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i + 0] = 255;
      imgData.data[i + 1] = 0;
      imgData.data[i + 2] = 0;
      imgData.data[i + 3] = 255;
  }
  ctx.putImageData(imgData, 10, 10);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/76/v3/sbIosIpbRbq052f7poScJw/zh-cn_image_0000002801107779.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=D5233FA67F355D76E4A0778673C82BE1E06D6F4194642F247BA3DA92FFA5F4DB)

### getPixelMap^9+^

> phone | 2in1 | tablet | tv | wearable | lite_wearable

getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap

获取用当前canvas指定区域内的像素创建的PixelMap对象。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--|:-----|:-|:-----------------|
|sx|number|是|指定区域的左上角x坐标。 单位：vp|
|sy|number|是|指定区域的左上角y坐标。 单位：vp|
|sw|number|是|指定区域的宽度。 单位：vp|
|sh|number|是|指定区域的高度。 单位：vp|

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------|:---------------------|
|[PixelMap](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-pixelmap)|返回包含指定区域像素的PixelMap对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas id="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const test = this.$element('canvasId')
    const ctx = test.getContext('2d');
    var pixelMap = ctx.getPixelMap(0, 0, 280, 300);
  }
}
```

### setLineDash

> phone | 2in1 | tablet | tv | wearable | lite_wearable

setLineDash(segments: Array<number>): void

设置画布的虚线样式。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-------|:------------|:-|:-------------------|
|segments|Array<number>|是|作为数组用来描述线段如何交替和间距长度。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.setLineDash([10, 20]);
    ctx.stroke();
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7e/v3/kkIxXFI8TWm6IuYtVBpGUQ/zh-cn_image_0000002771668000.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=C24C93CA43CB1843AB0A0787E8AB25EAC0A9D453BA1770A2E7B391A8A475FF2D)

### getLineDash

> phone | 2in1 | tablet | tv | wearable | lite_wearable

getLineDash(): Array<number>

获得当前画布的虚线样式。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------|:-----------------------|
|Array<number>|返回数组，该数组用来描述线段如何交替和间距长度。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var info = ctx.getLineDash();
  }
}
```

### transferFromImageBitmap^7+^

> phone | 2in1 | tablet | tv | wearable | lite_wearable

transferFromImageBitmap(bitmap: ImageBitmap): void

显示给定的[ImageBitmap对象](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagebitmap)。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:----------------------------------------------------------------------------------------------------------------|:-|:-----------------|
|bitmap|[ImageBitmap](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-imagebitmap)|是|待显示的ImageBitmap对象。|

**示例：**

```html
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```

```js
// xxx.js
export default {
  onShow() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    var canvas = this.$refs.canvas.getContext('2d');
    var offscreen = new OffscreenCanvas(500, 500);
    var offscreenCanvasCtx = offscreen.getContext("2d");
    offscreenCanvasCtx.fillRect(0, 0, 200, 200);

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9d/v3/u0pT5NSITu2fLm7amarpjg/zh-cn_image_0000002800987859.png?HW-CC-KV=V1&HW-CC-Date=20261022T091736Z&HW-CC-Expire=31536000000&HW-CC-Sign=D8547489CDB91CB84EF0F533950C1F3BC07BC0CEE1C4849FED008FE52733923B)