Pantalla de matriz LED con texto desplazable

Vista prévia

Descripción

La pantalla de matriz de lienzo dibuja una pantalla de matriz LED animada con texto desplazable sobre un elemento canvas.

Funcionamiento

Incluya el Font. js en la página web que contiene matrices de JavaScript para las letras.

<script src="js/font.js"></script>

Cree un elemento canvas en la página.

<canvas id="canvas" width="360" height="480"></canvas>

Cree un campo de entrada para especificar el texto que se mostrará en la pantalla de matriz LED.

<form name="entry" onsubmit="return handleSubmit(event)">

<input type="text" name="word" value="WIKICSS" required>

<button>Show Word</button>
</form>

El JavaScript necesario para activar la pantalla de matriz LED.

var grid = reset()

const canvas = document.getElementById("canvas");
const CELL_WIDTH = 60, CANVAS_WIDTH = 360, CANVAS_HEIGHT = 480
var ctx = canvas.getContext("2d");

function reset () {

return [



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],



[ 0, 0, 0, 0, 0, 0 ],

]
}

function draw (grid) {

ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)

let y = 0

for (let row of grid) {



let x = 0



for (let col of row) {





ctx.beginPath()





ctx.rect(x, y, CELL_WIDTH, CELL_WIDTH);





if (col) {







ctx.fillStyle = '#0af'







ctx.fill()





}





ctx.stroke();





x += CELL_WIDTH



}



y += CELL_WIDTH

}
}

draw(grid);

const loopThrough = () => {

const chars = Object.values(font)

let index = 0



return setInterval(() => {



if (index < chars.length) {





draw(chars[index])





index = (index + 1) % chars.length



}

}, 500)
}

const showLetter = async function (char) {

if (Array.isArray(font[char])) {



for (let i = 0; i < (font[char][0] || []).length; i++) {





await (new Promise((resolve, reject) => {







setTimeout(() => {









let rowIndex = 0









grid.forEach(row => {











row.splice(0, 1)











row.push(font[char][rowIndex][i])











rowIndex += 1









}) // remove left-most column









draw(grid)









resolve()







}, 200)





}))



}

}
}

const showWord = async function (word) {

grid = reset()

word = (word || 'Yo!').toString().toUpperCase()

for (let char of word) {



await showLetter(char)

}
}

async function handleSubmit (e) {

e.preventDefault()

const form = e.target

const word = form.querySelector('[name=word]').value

form.querySelectorAll('input, button').forEach(elem => elem.setAttribute('disabled', 'disabled'))

await showWord(word)

form.querySelectorAll('input, button').forEach(elem => elem.removeAttribute('disabled'))

return false;
}

(async () => await showWord())()