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