关于javascript:微信小程序Canvas绘制图案生成海报朋友圈海报

当初小程序生成海报是很常见的，例如生成打卡海报、生成文案、生成宣传图、生成推广图等，都是少不了一个技术，就是图片绘制，有些是通过前端 Canvas 绘制，有些是通过后端绘制，当然前端 Canvas 绘制是比拟节省成本的，效率也高，也绝对门槛低，技术也容易实现，后端是会耗费服务器资源，减少服务器压力。

index.wxml

<!-- 创立一个 Canvas 组件 -->
<canvas canvas-id='MyCanvas' class='MyCanvas' style="width:{{screenWidth}}px;height:{{screenHeight}}px;"></canvas>

index.js

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function () {
    let that = this
    wx.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.PI
        MyCanvas.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.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html

Author:TANKING
Date:2020-08-27
Web:http://www.likeyun.cn/
WeChat:face6009