• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Canvas对象
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @sd-wu-->
5<!--Designer: @sunbees-->
6<!--Tester: @liuli0427-->
7<!--Adviser: @HelloCrease-->
8
9
10Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[CanvasRenderingContext2D对象](../reference/apis-arkui/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)。
11
12
13## 创建Canvas组件
14
15在pages/index目录下的hml文件中创建一个Canvas组件。
16
17
18```html
19<!-- xxx.hml -->
20<div class="container">
21  <canvas></canvas>
22</div>
23```
24
25
26```css
27/* xxx.css */
28.container{
29  width: 100%;
30  height: 100%;
31  flex-direction: column;
32  justify-content: center;
33  align-items: center;
34  background-color: #F1F3F5;
35}
36canvas{
37  background-color: #00ff73;
38}
39```
40
41![zh-cn_image_0000001222984605](figures/zh-cn_image_0000001222984605.png)
42
43> **说明：**
44> - Canvas组件默认背景色与父组件的背景色一致。
45>
46> - Canvas默认宽高为width: 300px，height: 150px。
47
48
49## 添加样式
50
51Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
52
53
54```html
55<!-- xxx.hml -->
56<div class="container">
57  <canvas></canvas>
58</div>
59```
60
61
62```css
63/* xxx.css */
64.container{
65  flex-direction: column;
66  justify-content: center;
67  align-items: center;
68  background-color: #F1F3F5;
69  width: 100%;
70  height: 100%;
71}
72canvas{
73  width: 500px;
74  height: 500px;
75  background-color: #fdfdfd;
76  border: 5px solid red;
77}
78```
79
80![zh-cn_image_0000001177623482](figures/zh-cn_image_0000001177623482.png)
81
82
83## 添加事件
84
85Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
86
87
88```html
89<!-- xxx.hml -->
90<div class="container">
91  <canvas ref="canvas1" onlongpress="getUrl"></canvas>
92  <text>dataURL</text>
93  <text class="content">{{dataURL}}</text>
94</div>
95```
96
97
98```css
99/* xxx.css */
100.container{
101  width:100%;
102  height:100%;
103  flex-direction: column;
104  justify-content: center;
105  align-items: center;
106  background-color: #F1F3F5;
107  }
108  canvas{
109    width: 500px;
110    height: 500px;
111    background-color: #fdfdfd;
112    border: 5px solid red;
113    margin-bottom: 50px;
114}
115.content{
116  border: 5px solid blue;
117  padding: 10px;
118  width: 90%;
119  height: 400px;
120  overflow: scroll;
121}
122```
123
124
125```js
126// xxx.js
127import promptAction from '@ohos.promptAction';
128export default {
129  data:{
130    dataURL:null,
131  },
132  onShow(){
133    let el = this.$refs.canvas1;
134    let ctx = el.getContext("2d");
135    ctx.strokeRect(100,100,300,300);
136  },
137  getUrl(){
138    let el = this.$refs.canvas1
139    let dataUrl = el.toDataURL()
140    this.dataURL = dataUrl;
141    promptAction.showToast({duration:2000,message:"long press,get dataURL"})
142  }
143}
144```
145
146![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif)
147
148> **说明：**
149>
150> 画布不支持在onInit和onReady中进行创建。
151
152## 相关实例
153
154针对Canvas开发，有以下相关实例可供参考：
155
156- [自定义抽奖转盘（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponent)
157
158- [图片编辑（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
159