[canvas] 간단히 만들어보는 HTML5 애니메이션

canvas 안에서 각 좌표 목표에 닿을때  패스를 구성하는  원을 만들어 봅니다. 

<section>

    <div>

        <canvas id="canvas" width="400" height="300">

지원되지 않는 브라우져 입니다.

        </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);

}

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>

지원되지 않는 브라우져 입니다.