<!--畫布
 canvas-id 為畫布標(biāo)識(shí)，當(dāng)繪制時(shí)通過canvas-id找到畫布
-->
<canvas canvas-id="identify"/>

Page({
 data:{
  text:"Page canvas"
 },
 onLoad:function(options){
  // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 onReady:function(){
  // 頁面渲染完成
  //第一步創(chuàng)建個(gè)上下文容器
  var context = wx.createContext();

  //第二步繪制這里我們繪制個(gè)矩形 
  //x, y, widht, height
  context.rect(50, 50, 100, 100);
  //繪制的樣式進(jìn)行描邊繪制，fill為填充位置
  context.stroke();
  /**
   * 調(diào)用wx.drawCanvas，通過canvasId指定在哪張畫布上繪制，通過actions指定繪制行為
   * 
   *  注意convasId可以為數(shù)字表示也可以用字符串表示，就是一個(gè)繪制對(duì)象的標(biāo)識(shí)，并且可以指定多個(gè)
   *  actions 是從context上下文中獲取的繪制行為，即為第二步操作
   */

  wx.drawCanvas({
   //畫布標(biāo)識(shí)，傳入<canvas/>的cavas-id
   canvasId: 'identify',
   //獲取繪制行為， 就相當(dāng)于你想做到菜context.getActions()就是食材
   actions: context.getActions(),
  })


 },
 onShow:function(){
  // 頁面顯示
 },
 onHide:function(){
  // 頁面隱藏
 },
 onUnload:function(){
  // 頁面關(guān)閉
 }
})