• 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```
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  width: 100%;
64  height: 100%;
65}
66canvas{
67  width: 500px;
68  height: 500px;
69  background-color: #fdfdfd;
70  border: 5px solid red;
71}
72```
73
74![zh-cn_image_0000001177623482](figures/zh-cn_image_0000001177623482.png)
75
76
77## 添加事件
78
79Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
80
81
82```html
83<!-- xxx.hml -->
84<div class="container">
85  <canvas ref="canvas1" onlongpress="getUrl"></canvas>
86  <text>dataURL</text>
87  <text class="content">{{dataURL}}</text>
88</div>
89```
90
91
92```css
93/* xxx.css */
94.container{
95  width:100%;
96  height:100%;
97  flex-direction: column;
98  justify-content: center;
99  align-items: center;
100  background-color: #F1F3F5;
101  }
102  canvas{
103    width: 500px;
104    height: 500px;
105    background-color: #fdfdfd;
106    border: 5px solid red;
107    margin-bottom: 50px;
108}
109.content{
110  border: 5px solid blue;
111  padding: 10px;
112  width: 90%;
113  height: 400px;
114  overflow: scroll;
115}
116```
117
118
119```js
120// xxx.js
121import promptAction from '@ohos.promptAction';
122export default {
123  data:{
124    dataURL:null,
125  },
126  onShow(){
127    let el = this.$refs.canvas1;
128    let ctx = el.getContext("2d");
129    ctx.strokeRect(100,100,300,300);
130  },
131  getUrl(){
132    let el = this.$refs.canvas1
133    let dataUrl = el.toDataURL()
134    this.dataURL = dataUrl;
135    promptAction.showToast({duration:2000,message:"long press,get dataURL"})
136  }
137}
138```
139
140![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif)
141
142> **说明：**
143> 画布不支持在onInit和onReady中进行创建。
144
145## 相关实例
146
147针对Canvas开发，有以下相关实例可供参考：
148
149- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/code/UI/JsComponentClollection/JsComponentCollection)
150