现在小程序生成海报是很常见的,例如生成打卡海报、生成文案、生成宣传图、生成推广图等,都是少不了一个技术,就是图片绘制,有些是通过前端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、下载图像

本文作者:思否-TANKING

写在最后:如果大家对小程序开发还有任何问题欢迎大家加QQ群664658494,一起沟通交流

相关说明
① 本站VIP源码资源永久免费下载www.src1024.com
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,info@src1024.com。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

1024资源网 » 微信小程序Canvas绘制图案(生成海报、朋友圈海报)

发表评论