Cześć, mam problem z zmianą kolorów za pomocą przycisku w elemencie canvas na randomowe kolory. Kod js:
function rysunek() {
var rysunek = document.getElementById('plo');
canvas = rysunek.getContext("2d");
var a = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var c = parseInt(Math.random() * 256);
canvas.beginPath();//1
canvas.moveTo(118,77);
canvas.lineTo(118,99);
canvas.lineTo(140,99);
canvas.lineTo(118,77);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();
canvas.beginPath();//2
canvas.moveTo(128,81);
canvas.lineTo(166,81);
canvas.lineTo(180,99);
canvas.lineTo(145,99);
canvas.lineTo(128,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();
canvas.beginPath();//3
canvas.moveTo(171,81);
canvas.lineTo(191,81);
canvas.lineTo(191,107);
canvas.lineTo(171,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();
canvas.beginPath();//4
canvas.moveTo(196,81);
canvas.lineTo(219,81);
canvas.lineTo(219,107);
canvas.lineTo(196,107);
canvas.lineTo(196,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();
canvas.beginPath();//5
canvas.moveTo(223,81);
canvas.lineTo(272,81);
canvas.lineTo(272,130);
canvas.lineTo(223,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();
canvas.beginPath();//6
canvas.moveTo(223,86);
canvas.lineTo(223,116);
canvas.lineTo(254,116);
canvas.lineTo(223,86);
canvas.fillStyle="rgb(50,50,50)";
canvas.fill();
canvas.stroke();
canvas.beginPath();//7
canvas.moveTo(276,102);
canvas.lineTo(276,152);
canvas.lineTo(325,152);
canvas.lineTo(276,102);
canvas.fillStyle="rgb(50,50,50)";
canvas.fill();
canvas.stroke();
}
function main() {
document.getElementById('clear').addEventListener('click', function() {
canvas.clearRect(0, 0, rysunek.width, rysunek.height);
}, false);
rysunek();
}Kod HTML:
<!Doctype HTML> <html> <head> <title>Lesson 4</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js.js"></script> </head> <body onload="rysunek()"> <div id="fis"> <canvas style="margin-right: 10px;" width="400" height="250" id="plo">Przeglądarka nie obsługuje elementu</canvas></div> <input type="submit" id="clear"> </body> </html>