关于小程序用canvas绘制二维码分享页面

最新推荐文章于 2024-08-08 08:33:01 发布

孑孑然

最新推荐文章于 2024-08-08 08:33:01 发布

阅读量847

点赞数

分类专栏：项目记录文章标签：小程序 canvas 小程序码

本文链接：https://blog.csdn.net/qq_41620704/article/details/90229424

版权

本文介绍如何在小程序中使用canvas绘制二维码分享页面，详细讲解了遇到的问题及解决办法，包括矩形路径闭合、文字居中计算、异步处理图片下载以及背景图片的自适应布局策略。

摘要由CSDN通过智能技术生成

先上代码，然后再分析一下

<!--pages/my/erweima/erweima.wxml-->
<view>
  <canvas canvas-id='share' style='width:{
  {windowWidth}}px;height:{
  {windowHeight}}px;' ></canvas>
  <cover-view class='save'>
    <button bindtap='saveImageToPhotosAlbum'>保存图片</button>
  </cover-view>
</view>

// js的onLoad生命周期中
onLoad: function (options) {
    var that = this;
    //获取屏幕尺寸
    wx.getSystemInfo({
      success: function (res) {
        // 高度,宽度 单位为px
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
    //下载图片
    let p1 = new Promise((resolve, reject) => {
      //下载背景图片
      wx.downloadFile({
        url: 'https://example.jpg',
        success: function (res) {
          reso