微信小程序 canvas 自适应海报图

1.获取屏幕宽高 设置canvas的宽高

// 1.获取屏幕宽高  设置canvas的宽高
<canvas type="2d" id="canvas" style="width: {{canvasWithd}}px;height: {{canvasHeight}}px"></canvas>

data: {
  canvasWithd: '',
  canvasHeight: ''
}
let myCanvasWidth  = ''
let myCanvasHeight = ''
wx.getSystemInfo({
  success: function (res) {
    myCanvasWidth = res.windowWidth
    myCanvasHeight = res.windowHeight
  },
 })
this.setData({
   width: myCanvasWidth,
   height: myCanvasHeight
})
  1. 计算动态宽高参数
// 设置规定宽高 为375  667
let wpx = myCanvasWidth / 375
let hpx = myCanvasHeight / 677
  1. 使用动态参数
// 长度和横向距离用wpx，高度和竖直距离用hpx即可
ctx.drawImage(img, 30 * wpx, 60 * hpx, 70 * wpx, 70 * hpx)
Ctx.fillText('文字', 100 * wpx, 90 * hpx);
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容