小程序 画布 最最简单代码

首先统一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
         })
        }
      })