Here is the final result:
You can watch the video a little bit visually
www.ixigua.com/69684358313…
Online Experience: Experience Path – wX: The Perfect Tool — Shine love beans
Brief description of the implementation ideas:
2. Use getImageData() to getImageData. 3. Set the value of black (you can use other colors) in the image data at certain intervals (to get coordinates). 5. Use requestAnimationFrame to change the rectangle color. So it’s flashing
Go straight to code
var i = 0
Page({
/ * *
* Initial data for the page
* /
data: {
hideNav: false,
colors: [“#fff”, “#FF6E40”, “#FFAB40”, “#FFFF00”, “#EEFF41”, “#B2FF59”, “#69F0AE”, “#64FFDA”, “#18FFFF”, “#40C4FF”, “#E040FB”, “#FF4081”, “#ff5252”],
Text: ‘Xiao Zhan ‘,
scroll: false,
setting: false
},
/ * *
* Lifecycle functions — listen for page loads
* /
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.text
const width = res[0].width
const height = res[0].height
const canvas = res[0].node
const ctx = canvas.getContext(‘2d’)
const dpr = 1 //wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
i = (canvas.width – that.getByteLen(text) * 100) / 2
ctx.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 = canvas
this.data.ctx = ctx
this.data.imageData = imageData
console.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.data
if (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 = this
wx.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(‘ Text length ‘,len)
return len;
},
donothing() {
},
/ * *
* Lifecycle function – Listens for the page to finish rendering for the first time
* /
onReady: function () {
},
/ * *
* Lifecycle functions – Listen for page display
* /
onShow: function () {
},
/ * *
* Lifecycle functions – Listen for page hiding
* /
onHide: function () {
},
/ * *
* Lifecycle functions – Listen for page unloads
* /
onUnload: function () {
wx.setStorage({
data: this.data.text,
key: ‘blinkText’,
})
},
/ * *
* Page-related event handlers – listen for user pull down actions
* /
onPullDownRefresh: function () {
},
/ * *
* A handler for a pull-down event on a page
* /
onReachBottom: function () {
},
/ * *
* Users click on the upper right to share
* /
onShareAppMessage: function () {
}
})