1# DrawingRenderingContext 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9使用DrawingRenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## constructor 16 17constructor(unit?: LengthMetricsUnit) 18 19**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| -------- | ---------------------------------------- | ---- | ---------------------------------------- | 27| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置DrawingRenderingContext对象的单位模式，配置后无法更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT <br/>异常值按默认值处理。| 28 29## size 30 31get size(): Size 32 33获取DrawingRenderingContext的大小。 34 35**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**返回值：** 40 41| 类型 | 说明 | 42| ----------- | ---------------------------------------- | 43| [Size](#size) | DrawingRenderingContext的尺寸信息。 | 44 45## canvas 46 47get canvas(): DrawingCanvas 48 49获取绘制内容的画布对象。 50 51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**返回值：** 56 57| 类型 | 说明 | 58| ----------- | ---------------------------------------- | 59| [DrawingCanvas](#drawingcanvas12对象说明) | 绘制内容的画布对象。 | 60 61## invalidate 62 63invalidate(): void 64 65使组件无效，触发组件的重新渲染。 66 67**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71## DrawingCanvas<sup>12+</sup>对象说明 72 73type DrawingCanvas = Canvas 74 75可用于向XComponent上绘制内容的画布对象。 76 77**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81| 类型 | 说明 | 82| --------------------- | -------------- | 83| [Canvas](../../apis-arkgraphics2d/arkts-apis-graphics-drawing-Canvas.md) | 返回一个Canvas对象。 | 84 85## Size 86 87DrawingRenderingContext的尺寸信息。 88 89**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93| 名称 | 类型 | 只读 | 可选 | 说明 | 94| ---------- | -------------- | ------ | ---------------- | ------------------------ | 95| width | number | 否 | 否 | 获取DrawingRenderingContext的宽度，其值为关联的Canvas组件的宽度。 | 96| height | number | 否 | 否 | 获取DrawingRenderingContext的高度，其值为关联的Canvas组件的高度。 | 97 98## 示例 99 100该示例实现了如何使用DrawingRenderingContext中的方法进行绘制。 101 102```ts 103import { common2D, drawing } from '@kit.ArkGraphics2D'; 104 105// xxx.ets 106@Entry 107@Component 108struct CanvasExample { 109 private context: DrawingRenderingContext = new DrawingRenderingContext(); 110 111 build() { 112 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 113 Canvas(this.context) 114 .width('100%') 115 .height('50%') 116 .backgroundColor('#D5D5D5') 117 .onReady(() => { 118 let brush = new drawing.Brush(); 119 // 使用RGBA(39, 135, 217, 255)填充圆心为(200, 200)，半径为100的圆 120 brush.setColor({ 121 alpha: 255, 122 red: 39, 123 green: 135, 124 blue: 217 125 }); 126 this.context.canvas.attachBrush(brush); 127 this.context.canvas.drawCircle(200, 200, 100); 128 this.context.canvas.detachBrush(); 129 this.context.invalidate(); 130 }) 131 Button("Clear") 132 .width('120') 133 .height('50') 134 .onClick(() => { 135 let color: common2D.Color = { 136 alpha: 0, 137 red: 0, 138 green: 0, 139 blue: 0 140 }; 141 // 使用RGBA(0, 0, 0, 0)填充画布 142 this.context.canvas.clear(color); 143 this.context.invalidate(); 144 }) 145 } 146 .width('100%') 147 .height('100%') 148 } 149} 150``` 151 152图1 绘制圆心为(200, 200)，半径为100的圆，填充色为RGBA(39, 135, 217, 255) 153 154  155 156图2 点击Clear按钮清空画布 157 158  159
