Исходный код "полотна":
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5 Canvas Shapes</title>
</head>
<body>
<canvas id="myCanvas" width="520" height="520"></canvas>
<div id="sign" style="font: normal 20px Segoe Script, sans-serif;"></div>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var i=0;
function nextStep() {
if (i > 99) {
canvas.style.backgroundColor = getRndColor();
setSign('© Designed by Anatoly Demidovich');
return;
}
i++;
context.lineWidth = getRndW();
context.strokeStyle = getRndColor();
if (Math.random() < 0.5) {
context.beginPath();
context.moveTo(getRndDot(), getRndDot());
}
var rnd = Math.random();
if (rnd < 0.1) {
context.lineTo(getRndDot(), getRndDot());
} else if (rnd > 0.7) {
context.bezierCurveTo(getRndDot(), getRndDot(), getRndDot(), getRndDot(), getRndDot(), getRndDot());
} else {
context.quadraticCurveTo(getRndDot(), getRndDot(), getRndDot(), getRndDot());
}
var rnd = Math.random();
if (rnd < 0.6) {
if (rnd < 0.3) context.closePath();
context.fillStyle = getRndColor();
context.fill();
}
context.stroke();
setTimeout(nextStep, 100);
}
setTimeout(nextStep, 1);
function getRndDot() {
return Math.floor(Math.random() * 500);
}
function getRndColor() {
var s = '#';
for (var i=0; i<6; i++) {
s += (Math.floor(Math.random() * 16) + 1).toString(16);
}
return s;
}
function getRndW() {
return Math.floor(Math.random() * 10) + 1;
}
function setSign(txt) {
var sign = document.getElementById('sign');
var i=0;
function setText() {
if (i == txt.length) return;
sign.appendChild(document.createTextNode(txt.charAt(i)));
i++;
setTimeout(setText, 100);
}
setTimeout(setText, 100);
}
</script>
</body>
</html>
Художника обидеть может каждый... :)
