Canvas组件提供画布,用于自定义绘制图形。
创建Canvas组件
在pages/index目录下的hml文件中创建一个Canvas组件。
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
</div>
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
background-color: #00ff73;
}
说明
- Canvas组件默认背景色与父组件的背景色一致。
- Canvas默认宽高为width: 300px,height: 150px。
添加样式
Canvas组件设置宽(width)、高(height)、背景色(background-color)及边框样式(border)。
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
</div>
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
width: 100%;
height: 100%;
}
canvas{
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
添加事件
C