微信小程序 使用cansav画布 制作海报

1，wxml

<view class="myview">
  <canvas type="2d" id="myCanvas" class='canvas-style'></canvas>
  <button type="primary" class="my-btn">保存图片</button>
</view>

2，css在这里插入代码片

.myview{
   
  height: 80vh;
  width: 90%;
  /* background-color: red; */
  border: red solid 0.5rpx;
  margin: 0 auto;
  padding-top: 20rpx;
}
.canvas-style{
   
  height: 70vh;
  width: 90%;
  margin: 0 auto;
  /* margin-top: 20rpx; */
  border: solid blue 0.5rpx;
}

3，js

Page({
   
onLoad: function () {
   
    this.myInit()
  },
})

入口文件

myInit: function () {
   
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
   
        node: true,
        size: true
      })
      .exec((res) => {
   
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        // var img = new Image();
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        console.log('设备的像素比', dpr);
        
        this.setData(