опыты с html5

 


Вернулся к вопросу анимации под этот язык. С первым эффектом вышло не все сразу, я так и не смог добиться пересечения окружностей. верный Гугл подсказал решение - считать цвета пикселей.

Вот и получилась анимация:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='500px'/>
<script type='text/javascript'>
   <!--from www . ja  v a 2s. c  o m-->
//http://www.java2s.com/Tutorials/HTML_CSS/HTML5_Canvas/0640__HTML5_Canvas_Animation.htm
    var x = 0;
    var x0 = 0;
    var x1 = 0;
    var x2 = 0;
    var y0 = 0;
    var y1 = 0;
    var y2 = 0;
    var deg=Math.PI / 180;
    function drawIt() { 
        window.requestAnimationFrame(drawIt); 
        var canvas = document.getElementById('canvas'); 
        var c = canvas.getContext('2d'); 
        c.clearRect(0,0,canvas.width,canvas.height); 
        x0=Math.floor( 250+200*Math.cos((x)* Math.PI / 180) );
        x1=Math.floor( 250+200*Math.cos((x+120)* Math.PI / 180) );
        x2=Math.floor( 250+200*Math.cos((x+240)* Math.PI / 180) );
        y0=Math.floor( 250+200*Math.sin((x)* Math.PI / 180) );
        y1=Math.floor( 250+200*Math.sin((x+120)* Math.PI / 180) );
        y2=Math.floor( 250+200*Math.sin((x+240)* Math.PI / 180) );

c.globalCompositeOperation="lighten";
        c.beginPath();
  c.arc( x0, y0, 346, 0, deg*360 );
        c.closePath();
        c.fillStyle='#0000FF';
        c.fill();
        c.beginPath();
  c.arc( x1, y1, 346, 0, deg*360 );
        c.closePath();
        c.fillStyle='#00FF00';
        c.fill();
        c.beginPath();
  c.arc( x2, y2, 346, 0, deg*360 );
        c.closePath();
        c.fillStyle='#FF0000';
        c.fill();
        myImage = c.getImageData(0, 0, 500, 500);
var dataArray=myImage.data;
        for (var i = 0; i < 250000 * 4; i += 4) {
        var red = dataArray[i];
        var green = dataArray[i + 1];
        var blue = dataArray[i + 2];
      if ((red==255) && (green==255) && (blue==255))
      {}else
      {
          myImage.data[i]=0;
          myImage.data[i+1]=0;
          myImage.data[i+2]=0;
          }
        }
c.putImageData(myImage, 0, 0);
    c.stroke();

        x+=2; 
        if (x>360)
        {
        x=0;
        }
    } 
    drawIt();
</script>
</body>
</html>

Код не ах, спишу на то, что я только начинающий.


А этот узор я видел в Processing и версию для TIC-80. Написал сегодня, с утра:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='500px'/>
<script type='text/javascript'>
    var x = 0;
    var t = 0;
        var canvas = document.getElementById('canvas'); 
        var c = canvas.getContext('2d'); 
        myImage = c.getImageData(0, 0, 500, 500);
    function drawIt() { 
        window.requestAnimationFrame(drawIt); 
//        var canvas = document.getElementById('canvas'); 
//        var c = canvas.getContext('2d'); 
//        c.clearRect(0,0,canvas.width,canvas.height); 
//        myImage = c.getImageData(0, 0, 500, 500);
 var dataArray=myImage.data;
        for (var i = 0; i < 250000 * 4; i += 4)
{
myImage.data[i]=myImage.data[i+2000];
myImage.data[i+1]=myImage.data[i+2001];
myImage.data[i+2]=myImage.data[i+2002];
myImage.data[i+3]=myImage.data[i+2003];
}
 for (var x=0;x<500;x+=1)
{
// var v=Math.abs(t+((x-t)^(x+t))**3)%997<97?255:0;
 var v=(x^t)%9?255:0;
          myImage.data[x*4+998000]=v;
          myImage.data[x*4+998001]=v;
          myImage.data[x*4+998002]=v;
          myImage.data[x*4+998003]=255;//499*4*500+3
}
t=t+1;
c.putImageData(myImage, 0, 0);
    c.stroke();
} 
    drawIt();
</script>
</body>
</html>


Узор получится другой, если вычисление v использовать так, как в коде, можно изменить комментарии:


Кстати, интересная идея! Нашел в бложиках.




Комментарии

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