---
name: "canvasPutImageData"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "ty.canvasPutImageData - 将像素数据绘制到画布"
---

## canvasPutImageData

> [VERSION] 基础库 >= 2.21.8

### 描述

将像素数据绘制到画布

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `params` | `CanvasPutImageDataOption` | 是 | 像素数据配置 |

### 返回值

无


### 引用对象

##### `interface` CanvasPutImageDataOption

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `canvasId` | `string` | canvas 组件的 id |
| `data` | `number[]` | 图像像素点数据，一维数组，每四项表示一个像素点的 RGBA |
| `x` | `number` | 源图像数据在目标画布中的 x 坐标 |
| `y` | `number` | 源图像数据在目标画布中的 y 坐标 |
| `width` | `number` | 源图像数据矩形区域的宽度 |
| `height` | `number` | 源图像数据矩形区域的高度 |
| `success` | `(result: CanvasPutImageDataResult) => void` | 接口调用成功的回调函数 |
| `fail` | `(result: CanvasPutImageDataResult) => void` | 接口调用失败的回调函数 |
| `complete` | `(result: CanvasPutImageDataCompleteResult) => void` | 接口调用结束的回调函数（调用成功、失败都会执行） |

##### `interface` CanvasPutImageDataResult

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `data` | `number[]` | 图像像素点数据 |
| `x` | `number` | 源图像数据在目标画布中的 x 坐标 |
| `y` | `number` | 源图像数据在目标画布中的 y 坐标 |
| `width` | `number` | 源图像数据矩形区域的宽度 |
| `height` | `number` | 源图像数据矩形区域的高度 |

##### `type` CanvasPutImageDataCompleteResult

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `string` | 调用结果类型 |
| `result` | `CanvasPutImageDataResult` | 结果数据 |


### 示例代码

#### 将像素数据绘制到画布

```ts
ty.canvasPutImageData({
  canvasId: 'myCanvas',
  data: [255, 0, 0, 255, 0, 255, 0, 255],
  x: 0,
  y: 0,
  width: 2,
  height: 1,
  success() {
    console.log('绘制成功');
  },
});
```