微信小程序海报功能（canvas）- - -附效果图

换日线°

已于 2025-03-04 19:05:19 修改

阅读量1.5k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序 canvas

于 2020-05-11 14:26:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43764578/article/details/106053498

版权

微信小程序专栏收录该内容

90 篇文章

订阅专栏

效果图如下所示

在这里插入图片描述

.wxml

<canvas canvas-id="shareBox"></canvas>

.wxss

canvas{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.js

Page({
  data: {
    deviceWidth:'',
    deviceHeight:'',
  },
  onShow:function(e){
    //绘制canvas图片
    var that = this;
    var imgLogo = '/images/userprofile.png'; //微信头像本地路径
    var bgimg = "/images/mastergraph.png"; //背景图
    var qrcode = "/images/qrcode.png";//二维码
    const ctx = wx.createCanvasContext('shareBox', this);
    ctx.setFillStyle("white");
    var deviceWidth = that.data.deviceWidth; //宽
    var deviceHeight = that.data.deviceHeight;  //高
    ctx.fillRect(0, 0, deviceWidth, deviceHeight);
    // 绘制背景图
    ctx.drawImage(bgimg, 10, 10, deviceWidth - 20, deviceHeight - 110);
    //绘制底部背景颜色
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, deviceHeight - 100, deviceWidth, 100);
    //绘制微信名称
    ctx.setFontSize(15);
    ctx.setFillStyle('#000');
    ctx.setTextAlign('left');
    ctx.fillText("林晨：", 110, deviceHeight - 55);
    //绘制分享标题
    ctx.setFontSize(15);
    ctx.setFillStyle('#000');
    ctx.setTextAlign('left');
    ctx.fillText("邀请您一起参加", 110, deviceHeight - 35);
    // 绘制二维码
    ctx.drawImage(qrcode,deviceWidth - 100, deviceHeight - 90, 80, 80);
    //绘制圆形头像
    ctx.save();
    ctx.beginPath();
    ctx.arc(60, deviceHeight - 50, 35, 0, 2 * Math.PI, false);
    ctx.setStrokeStyle('#eee')
    ctx.stroke(); //画了背景的话要先画圆在裁剪才能有圆形图片
    ctx.clip(); //裁剪
    ctx.drawImage(imgLogo, 20, deviceHeight - 85, 80, 80);
    ctx.restore();
    ctx.draw(); 
  },
  onLoad: function (options) {
    let that = this
    wx.getSystemInfo({
      success(res) {
        console.log(res.windowWidth);
        console.log(res.windowHeight);
        that.setData({
          deviceWidth: res.windowWidth,
          deviceHeight: res.windowHeight,
        })
      }
    })
  },
})

海报如果在真机上不显示可以参考：https://blog.youkuaiyun.com/qq_43764578/article/details/101704775

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。