小程序学习之小程序组件（七）画布组件

<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()
  }
})