Dosyć łatwo jest zrobić taki generator (mający oczywiście tylko podstawową funkcjonalność).
Poniższy kod możesz dopasować 'pod siebie'. W formularz wpisuje się literę i wyraz. Wyraz jest zamieniany na duże litery i rysowany na canvas (300px x 1300px). Generalnie pętla sprawdza każdą litere w wyrazie i jeżeli znajdzie ją w tablicy obiektów z literami to ją rysuje. Każda litera ma 5x7 znaków i jest zapisana jako tablica.
Całkiem spoko pomysł na jakiś mini szybki projekcik.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Letter generator</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<canvas id='canvas'></canvas>
<form id='form'>
<label>Podaj wyraz:</label>
<input type='text' id='word'>
<label>Podaj znak:</label>
<input type='text' id='sign'>
<button>wypisz</button>
</form>
<script src='letters.js'></script>
<script src='main.js'></script>
</body>
</html>
main.js
const canvas = document.querySelector('#canvas');
canvas.height = 300;
canvas.width = 1300;
const ctx = canvas.getContext('2d');
const {height:h , width: w} = canvas;
let sign = '';
let word = '';
const form = document.querySelector('#form');
const wordInput = document.querySelector('#word');
const signInput = document.querySelector('#sign');
form.addEventListener('submit',drawWord);
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,w,h);
ctx.font = '25px Arial';
function drawWord(e){
e.preventDefault();
sign = signInput.value;
word = wordInput.value;
word = word.toUpperCase();
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = 'white';
for(let k=0; k<word.length; k++){
for(let m=0; m<letters.length; m++){
if(word.charAt(k) === letters[m].letter){
for(let i=0; i<5; i++){
for(let j=0; j<7; j++){
if(letters[m].array[j*5 + i] === 1){
ctx.fillText(sign,50+k*120 + i*20, 50 + j*20);
}
}
}
}
}
}
}
letters.js
const letters = [
{
letter: 'A',
array: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,1,
1,0,0,0,1,
1,0,0,0,1
]
},
{
letter: 'B',
array: [
1,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,0
]
},
{
letter: 'C',
array: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,1,
0,1,1,1,0
]
},
{
letter: 'D',
array: [
1,1,1,0,0,
1,0,0,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,1,0,
1,1,1,0,0
]
},
{
letter: 'E',
array: [
1,1,1,1,1,
1,0,0,0,0,
1,0,0,0,0,
1,1,1,1,0,
1,0,0,0,0,
1,0,0,0,0,
1,1,1,1,1
]
},
{
letter: 'F',
array: [
1,1,1,1,1,
1,0,0,0,0,
1,0,0,0,0,
1,1,1,1,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0
]
},
{
letter: 'G',
array: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,0,
1,0,1,1,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,1
]
},
{
letter: 'H',
array: [
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,0,0,0,0
]
},
{
letter: 'I',
array: [
0,1,1,1,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,1,1,1,0
]
},
{
letter: 'J',
array: [
0,0,1,1,1,
0,0,0,1,0,
0,0,0,1,0,
0,0,0,1,0,
0,0,0,1,0,
1,0,0,1,0,
0,1,1,0,0
]
},
{
letter: 'K',
array: [
1,0,0,0,1,
1,0,0,1,0,
1,0,1,0,0,
1,1,0,0,0,
1,0,1,0,0,
1,0,0,1,0,
1,0,0,0,1
]
},
{
letter: 'L',
array: [
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0,
1,1,1,1,1
]
},
{
letter: 'M',
array: [
1,0,0,0,1,
1,1,0,1,1,
1,0,1,0,1,
1,0,1,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1
]
},
{
letter: 'N',
array: [
1,0,0,0,1,
1,0,0,0,1,
1,1,0,0,1,
1,0,1,0,1,
1,0,0,1,1,
1,0,0,0,1,
1,0,0,0,1
]
},
{
letter: 'O',
array: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
]
},
{
letter: 'P',
array: [
1,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,0,
1,0,0,0,0,
1,0,0,0,0,
1,0,0,0,0
]
},
{
letter: 'R',
array: [
1,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,1,1,1,0,
1,0,1,0,0,
1,0,0,1,0,
1,0,0,0,1
]
},
{
letter: 'S',
array: [
0,1,1,1,1,
1,0,0,0,0,
1,0,0,0,0,
0,1,1,1,0,
0,0,0,0,1,
0,0,0,0,1,
1,1,1,1,0
]
},
{
letter: 'T',
array: [
1,1,1,1,1,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0
]
},
{
letter: 'U',
array: [
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
]
},
{
letter: 'W',
array: [
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,1,0,1,
1,0,1,0,1,
1,0,1,0,1,
0,1,0,1,0
]
},
{
letter: 'X',
array: [
1,0,0,0,1,
1,0,0,0,1,
0,1,0,1,0,
0,0,1,0,0,
0,1,0,1,0,
1,0,0,0,1,
1,0,0,0,1,
]
},
{
letter: 'Y',
array: [
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,0,1,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0
]
},
{
letter: 'Z',
array: [
1,1,1,1,1,
0,0,0,0,1,
0,0,0,1,0,
0,0,1,0,0,
0,1,0,0,0,
1,0,0,0,0,
1,1,1,1,1
]
}
]
wynik:
