<html>
<body onload="func()">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;" onmousemove="func1()" onclick="func()">
</canvas>
<input type="color" id="mycolor" value="#000000" style="position:absolute;top:0;">
<input type="button" id="mybutton" value="в пиксели" style="position:absolute;top:50;" onclick="func2()">
<canvas id="myCanvas2" width="20" height="20" style="border:1px solid #000000;position:absolute;top:100;left:520;" >
</canvas>
<script>
var arraycolor = [];
var cnr = 0;
function func(){
for (var i = 0; i < 62500; i++){
arraycolor.push("#000000");
}
var color = document.getElementById("mycolor");
arraycolor[cnr] = color.value;
func1();
}
function func1(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 500,500);
var counter = 0;
for (var it_1 = 0; it_1 < 500;it_1+=25)
{
for (var it_2 = 0; it_2 < 500;it_2+=25)
{
var mouseX = event.pageX;
var mouseY = event.pageY;
if (mouseX > it_1 && mouseX < it_1+25 && (mouseY > it_2 && mouseY<it_2+25) )
{
cnr = counter;
ctx.strokeStyle = "blue";
ctx.strokeRect(it_1,it_2, 25,25);
}
ctx.fillStyle = arraycolor[counter];
ctx.fillRect(it_1,it_2,15,15);
counter++;
}
}
}
function func2(){
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
var counter = 0;
ctx.clearRect(0, 0,25,25);
for (var it_1 = 0; it_1 < 20;it_1++)
{
for (var it_2 = 0; it_2 < 20;it_2++)
{
ctx.fillStyle = arraycolor[counter];
ctx.fillRect(it_1,it_2,1,1 );
counter++;
}
}
}
</script>
</body>
</html>
| 