与普通网页开发的区别

1. 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
2. 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
3. 例如 jQuery、 Zepto 等，在小程序中是无法运行的。

海报保存到相册

createSelectorQuery

const query = wx.createSelectorQuery()
query.select('#myCanvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
复制代码

createImage（创建一个图片对象）

const bg = canvas.createImage()
 bg.src = 'https://game.gtimg.cn/images/lol/act/img/skin/big516000.jpg';
    bg.onload = (res) => {
      ctx.drawImage(bg, 0, 0, 700, 600)
      ctx.fillStyle = "#000000"
      ctx.font = "50px sans-serif"
      ctx.fillText("微信小程序海报分享",40, 800, 200) 
    }
复制代码

canvasToTempFilePath（导出图片）

wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 500,
    height: 700,
    destWidth: 500,
    destHeight: 700,
    canvas: canvas,
    success(res) {
      console.log(res,'导出图片成功')
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(info) {
          console.log(info)
         }
      })
    },
    fail(err) {
      console.log(err)
    }
    })
复制代码

saveImageToPhotosAlbum（保存图片到系统相册）

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success(info) {
      console.log(info)
     }
  })
复制代码

案例体验

些许粗糙,测试demo不重要啊微信小程序官方文档暂时还没更新譬如：draw方法找不到无法调用