您當前位置>首頁 » 新聞資訊 » 小(xiǎo)程序相(xiàng)關 >
微(wēi)信小(xiǎo)程序Canvas繪制(zh≈✔€φì)圖案（生(shēng)成海(hǎi)報(bào)、朋(péng)友($yǒu)圈海(hǎi)報(bào)）
發表時(shí)間(jiān)：2021-1-6
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：76
現(xiàn)在小(xiǎo)程序生(shēng)成海(hǎi)報(bào)是→÷(shì)很(hěn)常見(jiàn)的(de)，例如(rú)生(shēng)$®成打卡海(hǎi)報(bào)、生(shēng)成文(wén)案、生(shē←<ng)成宣傳圖、生(shēng)成推廣圖等，都(dōu)β¥是(shì)少(shǎo)不(bù)了(le)一(yī)個(gè)技(j<'ì)術(shù)，就(jiù)是(shì)圖片繪制(zhì)，有(yǒu)些(xiē)是(shì)¥↔±通(tōng)過前端Canvas繪制(zhì)，有(yǒu★→)些(xiē)是(shì)通(tōng)過後端繪制(zhì)，當然前端Canvas繪制(zhì)是∞$×(shì)比較節省成本的(de)，效率也(yě)高(gāo)，也(yě™)相(xiàng)對(duì)門(mén)檻低(dī)，技(jì)術(shù)也(yě)容易實現₹(xiàn)，後端是(shì)會(huì)消耗服務器(qì)資源，©¥♥Ω增加服務器(qì)壓力。
index.wxml
<!-- 創建一(yī)個(gè)Canvas組件∏¥(jiàn) -->
<canvas canvas-id='MyCanvas' class='MyCanvas' style="width:{{screenWidth}}px;height:{{screenHeight}}px;"></canvas>
index.js
// pages/test/test.js
Page({
/**
* 頁面的(de)初始數(shù)據
*/
data: {
},
/**
* 生(shēng)命周期函數(shù±<'β)--監聽(tīng)頁面加載
*/
onLoad: function () {
let that = this
wx.getSystemInfo({
success: (res) => {
let canvasWidth = (res.screenWidth - 20)*2 // 設置canvas寬度，屏幕寬度-20的(de)2倍
let canvasHeight = (res.screenH±×eight - 500)*2 // 設置canvas高(gāo)度，屏幕高(gāo)度-500的(de)≈βπ2倍
// 定義畫(huà)布對(duì)象
const MyCanvas = wx.createCanvasα∑φContext('MyCanvas')
// 在畫(huà)布上(shàng)繪制(zhì)文(wén)本
MyCanvas.setFontSize(20) // 文(wén)本大(dà)小(xiǎo)
MyCanvas.fillText('TANKING', 20, 30) // 文(wén)本、x軸位置、y軸位置
// 在畫(huà)布上(shàng)繪制(zhì)矩形
MyCanvas.rect(20, 40, 100, 50)// x軸位置、y軸位置、寬度、高(gāo)度
// 在畫(huà)布上(shàng)繪制(zhì)圓形
// 創建一(yī)個(gè)圓可(kě)以指定起始弧度為(wèi)0∑×，終止弧度為(wèi)2 * Math.PI
MyCanvas.arc(70, 150, 50, 0, 2 * Math.PI) // 圓心的(de)x坐(zuò)标、圓心的(de)y坐(zuò)标、圓的(d €€e)半徑、起始弧度（在3點鐘(zhōng)方向）、終止&$↕≥弧度
MyCanvas.setFillStyle('#f00') // 填充背景顔色
MyCanvas.fill() // 用(yòng)fill方法真正的(de)畫(huà)• ¶&到(dào)canvas中
MyCanvas.draw() //繪制(zhì)
that.setData({
canvasWidth:canvasWidth,
canvasHeight:canvasHeight,
screenWidth:canvasWidth/2,
screenHeight:canvasHeight/2
})
},
})
},
/**
* 生(shēng)命周期函數(shù)--監↑÷聽(tīng)頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生(shēng)命周期函數(shù)--監聽(tīng)頁面顯π≠示
*/
onShow: function () {
},
/**
* 生(shēng)命周期函數(shù)--監聽(tīng)頁α≠λ<面隐藏
*/
onHide: function () {
},
/**
* 生(shēng)命周期函數(shù)-ε✔→↕-監聽(tīng)頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相(xiàng)關事(shì)件(jiàn)處理(lǐ)函數(shùΩ)--監聽(tīng)用(yòng)戶下(xià)拉動作(zuò)
☆☆γ */
onPullDownRefresh: function () {
},
/**
* 頁面上(shàng)拉觸底事(shì)件(jiàn)δ★的(de)處理(lǐ)函數(shù)
*/
onReachBottom: function () {
},
/**
* 用(yòng)戶點擊右上(shàng)角分(fēn)享
↕≈≤φ*/
onShareAppMessage: function () {
}
})
index.wxss
.MyCanvas{
border: 1px solid #333;
margin:0 auto;
}
繪制(zhì)流程
1、引入Canvas組件(jiàn)，設置好(hǎo)Canvas的(d©£e)寬高(gāo)
2、定義Canvas：wx.createCanvasπ☆♦Context
3、創建圖形（直線、弧線路(lù)徑、矩形等）
4、生(shēng)成圖像
5、下(xià)載圖像
官方文(wén)檔
https://developers.weixin.qq.com/miniprogram/ ✘dev/api/canvas/wx.createOffscreenCanvas.html Ωλ
