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>반응형
'javascript & jQuery' 카테고리의 다른 글
| JavaScript 찔끔 (0) | 2016.04.21 |
|---|---|
| jQuery 찔끔 (0) | 2016.04.12 |
| Pluginslick (0) | 2016.04.05 |
| Bootstrap (0) | 2016.03.31 |
| [#1] web (0) | 2016.03.18 |