微信小程序Canvas绘制图案(生成海报、朋友圈海报)
2020/8/28 5:03:42
本文主要是介绍微信小程序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
这篇关于微信小程序Canvas绘制图案(生成海报、朋友圈海报)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程