再看看閃耀效果：
1、先將文字畫在canvas；
2、利用getImageData()獲取圖像數據；
3、將圖像數據中黑色（妳可以用其他顏色）按壹定間隔取值（獲取坐標）；
4、在獲取的坐標畫矩形（妳畫其他形狀也是可以的）；
5、使用requestAnimationFrame，變換矩形顏色。
這樣就閃爍起來了~~
var i = 0
Page({
/*** 頁面的初始數據*/data: {hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "#EEFF41", "#B2FF59", "#69F0AE", "#64FFDA", "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],
text: '肖戰',scroll: false,setting: false},
/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {let that = this, text = wx.getStorageSync('blinkText') || this.data.text;this.setData({text})this.init()},
init() {wx.createSelectorQuery().select('#canvas').fields({node: true,size: true,}).exec((res) => {let that = this,text = this.data.textconst width = res[0].widthconst height = res[0].height
const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = 1 //wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)i = (canvas.width - that.getByteLen(text) * 100) / 2ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.font = "bolder 200px Arial";ctx.fillStyle = 'black';ctx.textBaseline = 'top';ctx.fillText(text, 0, 100);// ctx.lineWidth = 5;// ctx.strokeText(text, 0, 100);let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;// console.log(imageData)
ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, canvas.width, canvas.height);
this.data.canvas = canvasthis.data.ctx = ctxthis.data.imageData = imageDataconsole.log(canvas.width, canvas.height)// this.drawText()const renderLoop = () => {this.drawText()
canvas.requestAnimationFrame(renderLoop)}//?canvas.cancelAnimationFrame(renderLoop)canvas.requestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = this.dataif (scroll) {if (i >= canvas.width) {i = -canvas.width}i += 2}
ctx.clearRect(0, 0, canvas.width, canvas.height)for (var h = 0; h < canvas.height; h += gap) {for (var w = 0; w < canvas.width; w += gap) {var position = (canvas.width * h + w) * 4;var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2];
if (r + g + b == 0) {ctx.fillStyle = this.data.colors[Math.floor(Math.random() * this.data.colors.length)];ctx.fillRect(w + i, h, 5, 5);}}}
},toggleSetting() {this.setData({setting: this.data.setting ? false : true})},setText(e) {
let that = thiswx.cloud.callFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: e.detail.value},success(res) {console.log('ContentCheck-res', res)if (res.result.code == 300) {console.log(res.result.msg)wx.showToast({icon: 'none',title: res.result.msg,})that.setData({'text': ''})} else {that.setData({setting: false,'text': e.detail.value})that.init()}},fail(err) {console.log('ContentCheck-errxxxx', err)
}})
},getByteLen(str) {var len = 0;for (var i = 0; i < str.length; i++) {var length = str.charCodeAt(i);if (length >= 0 && length <= 128) {len += 1;} else {len += 2;}}console.log('文字長度',len)return len;},donothing() {
},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {
},
/*** 生命周期函數--監聽頁面顯示*/onShow: function () {
},
/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {
},
/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {wx.setStorage({data: this.data.text,key: 'blinkText',})},
/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {
},
/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {
},
/*** 用戶點擊右上角分享*/onShareAppMessage: function () {
}})