现在小程序生成海报是很常见的，例如生成打卡海报、生成文案、生成宣传图、生成推广图等，都是少不了一个技术，就是图片绘制，有些是通过前端Canvas绘制，有些是通过后端绘制，当然前端Canvas绘制是比较节省成本的，效率也高，也相对门槛低，技术也容易实现，后端是会消耗服务器资源，增加服务器压力。
index.wxml
<!-- 创建一个Canvas组件 --><canvas canvas-id='MyCanvas' class='MyCanvas' style="width:{{screenWidth}}px;height:{{screenHeight}}px;"></canvas>
index.js
// pages/test/test.jsPage({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function () {let that = thiswx.getSystemInfo({success: (res) => {let canvasWidth = (res.screenWidth - 20)*2 // 设置canvas宽度，屏幕宽度-20的2倍let canvasHeight = (res.screenHeight - 500)*2 // 设置canvas高度，屏幕高度-500的2倍// 定义画布对象const MyCanvas = wx.createCanvasContext('MyCanvas') // 在画布上绘制文本MyCanvas.setFontSize(20) // 文本大小MyCanvas.fillText('TANKING', 20, 30) // 文本、x轴位置、y轴位置// 在画布上绘制矩形MyCanvas.rect(20, 40, 100, 50)// x轴位置、y轴位置、宽度、高度// 在画布上绘制圆形// 创建一个圆可以指定起始弧度为0，终止弧度为2 * Math.PIMyCanvas.arc(70, 150, 50, 0, 2 * Math.PI) // 圆心的x坐标、圆心的y坐标、圆的半径、起始弧度（在3点钟方向）、终止弧度MyCanvas.setFillStyle('#f00') // 填充背景颜色MyCanvas.fill() // 用fill方法真正的画到canvas中MyCanvas.draw() //绘制that.setData({canvasWidth:canvasWidth,canvasHeight:canvasHeight,screenWidth:canvasWidth/2,screenHeight:canvasHeight/2})},})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
index.wxss
.MyCanvas{border: 1px solid #333;margin:0 auto;}
绘制流程
1、引入Canvas组件，设置好Canvas的宽高
2、定义Canvas：wx.createCanvasContext
3、创建图形（直线、弧线路径、矩形等）
4、生成图像
5、下载图像
官方文档
https://developers./miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html
Author:TANKING
Date:-08-27
Web:/
WeChat:face6009
