엄지월드

HTML5 Canvas Tutorial for Beginners - Ep. 3 본문

Front

HTML5 Canvas Tutorial for Beginners - Ep. 3

킨글 2018. 6. 6. 20:44
반응형

HTML5 Canvas Tutorial for Beginners - Ep. 3


  <body>

    <canvas></canvas>

    <script src="canvas.js" type="text/javascript">


    </script>

  </body>


var canvas = document.querySelector('canvas')

  ;

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;


var c = canvas.getContext('2d');


function Circle(x, y, dx, dy, radius){

  this.x = x;

  this.y = y;

  this.dx = dx;

  this.dy = dy;

  this.radius = radius;


  this.draw = function(){

    c.beginPath();

    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

    c.strokeStyle = 'blue';

    c.stroke(); // 화면에 그리는 작업

    c.fill();

  }

  this.update = function(){

    if ( this.x+this.radius > innerWidth || this.x - this.radius < 0){

      this.dx = -this.dx;

    }

    if ( this.y+this.radius > innerHeight || this.y - this.radius < 0){

      this.dy = -this.dy;

    }

    this.x += this.dx;

    this.y += this.dy;

    this.draw();

  }

}


var circleArray = [];

for( var i = 0; i< 100; i++){

  var radius = 30;

  var x = Math.random() * (innerWidth - radius *2) + radius;

  var y = Math.random() * (innerHeight - radius *2) + radius;

  var dx = (Math.random() - 0.5) ;

  var dy = (Math.random() - 0.5) ;

  circleArray.push(new Circle(x, y, dx, dy, radius));

}



function animate(){

  requestAnimationFrame(animate);

  c.clearRect(0, 0, innerWidth, innerHeight)

  for(var i = 0; i<circleArray.length; i++){

    circleArray[i].update();

  }

}

animate()



'Front' 카테고리의 다른 글

json 크기 구하기  (0) 2018.11.19
위로 / 아래로 가기 버튼 만들기  (0) 2018.07.27
CSS(Cascading Style Sheets)  (0) 2018.04.07
HTML5 새로운 속성, 입력 값 체크  (0) 2018.03.17
웹 페이지 모바일 폭 맞추기  (0) 2018.03.17
'Front' Related Articles more
Comments