Еще одна иллюстрация работы с Canvas и замыканиями. На все про все - те же 10 секунд. Результат - не менее уникальное "монументальное полотно". Абстракционизм не отпускает :).
Исходный код "полотна":
Художника обидеть может каждый... :)
Исходный код "полотна":
<!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>
Художника обидеть может каждый... :)
Комментариев нет:
Отправить комментарий
Комментарий будет опубликован после модерации