티스토리 뷰

Web/javascript & jQuery

[#4] Canvas & Animation

구글링쟁이 k9e4h 2016.04.12 10:06

1. 그림 그릴 영역 준비

<canvas> : 그래픽이 그려질 영영(container)

-id, height, width : 크기의 단위 pixel수 % 안먹힘


2. 그림그릴 준비

var wpcanvas=document.getElementById("cvs");

var wpcontext=wpcanvas.getContext("2d");


-getContext : 2차원의 다양한 도형을 그릴 수 있는 메소드들을 ㄱ자ㅣㄴ context object를 get


3. 사각형 그리기


wpcontext.fillRect(20,20,100,100); // 사각형 그리기

wpcontext.strokeRect(20,160,100,100); // 테두리 있는 사각형 그리기

wpcontext.fillRect(160,20,100,100);

wpcontext.clearRect(190,50,40,40); // 그 위치 투명하게 만들기




----------------------------------------------------


http://html5.litten.com/simple-animation-in-the-html5-canvas-element/



가장 위 코드 복붙해서 보기 chrome 5.0 & Firefox 3.6 이상에서 animation 동작



<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas Test</title>
  </head>
<body>
  <section>
    <div>
        <canvas id="canvas" width="400" height="300">
         This text is displayed if your browser 
         does not support HTML5 Canvas.
        </canvas>
    </div>

<script type="text/javascript">
var canvas;  
var ctx;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300; 

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

 
function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  return setInterval(draw, 10); // draw라는 function을 10 miliseconds 마다 불러옴
}


function draw() {
  clear();
  ctx.fillStyle = "#FAF7F8";
  rect(0,0,WIDTH,HEIGHT);
  ctx.fillStyle = "#444444";
  circle(x, y, 10);

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

init();
</script>

  </section>
</body>
</html>


'Web > javascript & jQuery' 카테고리의 다른 글

JavaScript 찔끔  (0) 2016.04.21
jQuery 찔끔  (0) 2016.04.12
[#4] Canvas & Animation  (0) 2016.04.12
Pluginslick  (0) 2016.04.05
Bootstrap  (0) 2016.03.31
[#1] web  (0) 2016.03.18
댓글
댓글쓰기 폼