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

<canvas>为画布组件，默认尺寸宽度300px 高度225px，经常使用属性：canvas

ps：同一页面的canvas-id不可重复，若使用一个已经出现过的canvas-id，它对应的画布将被隐藏且再也不正常工做函数

<canvas>组件声明后，一个简单的画图工做分为如下步骤：code

• 声明画布上下文(CanvasContext)
• 使用画布上下文进行绘图描述
• 画图

ps：以上步骤须将代码写进js文件的onLoad()函数中xml

示例：(简单应用，更多用法见后面)blog

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