<!DOCTYPE html>
<html>
<body onload="press(event)">
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;" onclick="press(event)">
</canvas>
<div id="mytext"> </div>
<script>
let globalsymbol = "А";
let flag_table = 1;
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.clearRect(0,0,1000,500);
ctx.font = "30px Arial";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function press(event){
ctx.beginPath();
for (let y = 0; y < 500; y += 100) {
for (let x = 0; x < 1000; x += 100) {
ctx.moveTo(0, y);
ctx.lineTo(1000, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 1000);
}
ctx.stroke();
}
for (let y = 0; y <= 500; y += 100) {
for (let x = 0; x <= 1000; x += 100) {
if ((x >= event.pageX-10 && x <= event.pageX+90) && (y >= event.pageY-10 && y <= event.pageY+90))
{
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fillText(globalsymbol,x-50,y-50);
}
}
}
if (flag_table == 1){
flag_table = 2;
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
document.getElementById("myTable").style.fontSize = "40px";
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
y.setAttribute("fontSize", "10px");
document.getElementById("myTable").appendChild(y);
let arr_ru = ['а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и', 'й', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'ш', 'щ', 'ь', 'ы', 'ъ', 'э', 'ю', 'я'];
let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Ь', 'Ы', 'Ъ', 'Э', 'Ю', 'Я'];
for (var index = 0;index<33;index++)
{
var z = document.createElement("TD");
var t = document.createTextNode(arr_ru[index]);
z.appendChild(t);
document.getElementById("myTr").appendChild(z);
}
var y2 = document.createElement("TR");
y2.setAttribute("id", "myTr2");
y2.setAttribute("fontSize", "10px");
document.getElementById("myTable").appendChild(y2);
for (var index = 0;index<33;index++)
{
var z = document.createElement("TD");
var t = document.createTextNode(arr_RU[index]);
z.appendChild(t);
document.getElementById("myTr2").appendChild(z);
}
var br = document.createElement("BR");
document.body.appendChild(br);
document.getElementById("myTr").onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
};
document.getElementById("myTr").onmouseout = function(event) {
let target = event.target;
target.style.background = '';
};
document.getElementById("myTr").onclick = function(event) {
let target = event.target;
target.style.background = 'red';
globalsymbol = target.innerHTML;
};
document.getElementById("myTr2").onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
};
document.getElementById("myTr2").onmouseout = function(event) {
let target = event.target;
target.style.background = '';
};
document.getElementById("myTr2").onclick = function(event) {
let target = event.target;
target.style.background = 'red';
globalsymbol = target.innerHTML;
};
}
}
</script>
</body>
</html>
| 