Анатолий Демидович: HTML5 Canvas. Домик имел и холсты...

Еще одна иллюстрация работы с 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>

Художника обидеть может каждый... :)

Анатолий Демидович

Страницы

понедельник, 20 мая 2013 г.

HTML5 Canvas. Домик имел и холсты...

Комментариев нет:

Отправить комментарий