小程序canvas画出来的图片为什么显示不全？

Question

是按设计稿设置的宽高 但是画图出来后明显对不上 这是怎么回事？

<view class="index">
  <canvas style="width:660rpx;height:1186rpx" canvas-id="canvas">
  </canvas>
</view>

const app = getApp()

Page({
  data:{
  },
  onLoad: function () {
    let bg = wx.getStorageSync('bg')
    const ctx = wx.createCanvasContext('canvas'); 
    let width = 660;
    let height = 1186;
    ctx.drawImage(bg, 0, 0, width, height);
    ctx.draw();
  },
})

实际效果

应该是这样的才对

Answer 1

画图时的高度是canvas高度的1/2就对了

let width = 330;
let height = 593;
ctx.drawImage(bg, 0, 0, width, height);

Answer 2

因为你给的样式的单位是rpx

改成这样应该就行了

const app = getApp()

Page({
  data:{
  },
  onLoad: function () {
    let bg = wx.getStorageSync('bg')
    const ctx = wx.createCanvasContext('canvas'); 
    // 获取canvas上下文
    const canvas = ...
    ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
    ctx.draw();
  },
})