Mini programa: usa lienzo para crear efectos de texto

Mira el efecto brillante nuevamente:

1. Primero dibuja el texto en el lienzo;

2. Utilice getImageData() para obtener datos de la imagen

3. Calcule el color negro en los datos de la imagen (se pueden usar otros colores) de acuerdo con el valor de un determinado intervalo (obtenga las coordenadas);

4. Dibuje un rectángulo en las coordenadas obtenidas (también puede dibujar otras formas).

5. Utilice requestAnimationFrame para cambiar el color del rectángulo.

Esto parpadeará~~

var i = 0

Página({

/***Datos iniciales de la página* /data：{hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "# EEFF41", "#B2FF59", "#69F0AE", "#64FFDA" , "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],

texto: 'Shaw Battle',desplazamiento: false,setting.false},

/*** Función de ciclo de vida: escuchar la carga de la página*/ onLoad: función (opciones) {let that = this, text = wx.setData({text})this.init()} ,

init() {wx.createSelectorQuery().select('#canvas').fields({node: true,size: true,}).exec((res) => {let eso = esto,texto = this.data.textconst ancho = res[0].widthconst alto = res[0].

const lienzo = res[0].nodeconst ctx = lienzo.getContext('2d ')const dpr = 1 //wx.getSystemInfoSync().pixelRatiocanvas.width = ancho * dprcanvas.height = alto * dprctx.height = alto * dprctx.scale(dpr, dpr)i = ( canvas.width - that.getByteLen (texto) * 100) / 2ctx.fillStyle = "#ffffffff";ctx.fillRect(0, 0, canvas.lineWidth = 5;// ctx.strokeText(texto, 0, 100); let imageData = ctx.getImageData( 0, 0, lienzo.ancho, lienzo.alto).data;// console.log(imageData)

ctx.fillStyle = "#fffffillRect(0, 0, lienzo.ancho, lienzo.alto) ;

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, {soy

ageData,canvas,ctx, text,scroll} = this.dataif (desplazamiento) {if (i >= canvas.width) {i = -canvas.width}i += 2}

ctx.clearRect (0, 0, lienzo.ancho, lienzo.alto) for (var h = 0; h < lienzo.ctx.clearRect(0, 0, lienzo.ancho, lienzo.alto) {i += 2} posición],g = imageData[posición + 1],b = imageData[posición + 2];

if (r + g + b == 0) {ctx.fillStyle = this.data[posición + 1];