<canvas>为画布组件,默认尺寸宽度300px 高度225px,常用属性:
ps:同一页面的canvas-id不可重复,若使用一个已经出现过的canvas-id,它对应的画布将被隐藏且不再正常工作
<canvas>组件声明后,一个简单的画图工作分为以下步骤:
- 声明画布上下文(CanvasContext)
- 使用画布上下文进行绘图描述
- 画图
ps:以上步骤须将代码写进js文件的onLoad()函数中
示例:(简单应用,更多用法见后面)
<!--wxml-->
<view class="title">画布组件canvas的简单应用</view>
<view class="demo-box">
<canvas canvas-id="myCanvas" style="border:1rpx solid"></canvas>
</view>
//js
Page({
onLoad:function(options){
//创建画布上下文
const ctx = wx.createCanvasContext("myCanvas")
//设置填充颜色、填充区域
ctx.setFillStyle('orange')
ctx.fillRect(20,20,150,80)
//画图
ctx.draw()
}
})