小程序 畫布 最最簡單代碼

首先統一wxml

<!--index.wxml-->
<view class="page-body">
  <view class="page-body-wrapper">
    <canvas canvas-id="canvas" class="canvas"></canvas>
  </view>
</view>

添加圖像

//index.js
//獲取應用實例
Page({
  //事件處理函數
onLoad: function () {
     var ctx = wx.createContext()
     ctx.drawImage('https://lg-q84s63pk-1252816386.cos.ap-shanghai.myqcloud.com/1_04.png',10,10,20,20)
     wx.drawCanvas({
       canvasId: 'canvas',
       actions: ctx.getActions()
     })
  }
})

 據說手機上使用要先把圖片緩存到手機，據說是這么寫的（但是我沒有服務器，所以沒有測試過）

 wx.downloadFile({

       url: '圖片地址',//注意該地址為開發者服務器接口地址

       success: function (res) {

         that.setData({

           canvasimgbg: res.tempFilePath
         })
        }
      })