공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

튕기는 공

serpiko 2013. 10. 14. 10:08

 

 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CanvasTest</title>
<meta name="description" content="" />
<meta name="author" content="skw" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body>
<!--canvas 정의-->
<canvas id="a_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("a_canvas");
var ctx=canvas.getContext("2d");

/*
var image = new Image();
image.src = "resource/test.jpg";
image.onload=function(){
ctx.drawImage(image, 10, 10, 800, 600, 10, 10, 160, 120);
}*/
var ball = {x:10, y:100, dir_x:5, dir_y:5};


setInterval(drawBall, 10);

function drawBall()
{
ctx.fillStyle="white";
ctx.fillRect(0,0,300,300);

ctx.beginPath();
ctx.arc(ball.x,ball.y,5,0,2*Math.PI,true);
ctx.fillStyle="red"
ctx.fill();


ball.x += ball.dir_x;
ball.y += ball.dir_y;

if(ball.x < 0 || ball.x > 300) ball.dir_x*= -1;
if(ball.y < 0 || ball.y > 300) ball.dir_y*= -1;
}

//drawRect(ctx,"red");
/*
ctx.translate(30,30);
ctx.scale(2.5, 0.8);
drawRect(ctx, "green");

canvas.onmousedown=function(event){
var x=event.clientX;
var y=event.clientY;
var r=Math.random()*10+5;

//alert(event.locationInCanvas.x);
console.log("x = " + x + ", y = " + y);

ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y+r);
ctx.lineTo(x+r,y+r);
ctx.lineTo(x,y);

ctx.strokeStyle = "red";
ctx.stroke();
};
*/

</script>
</body>
</html>
저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

다이어그램 - GoJS (Diagram)  (0) 2013.10.14
snow Effect  (0) 2013.10.14
HTML5 가이드 - PDF  (0) 2013.10.14
각 웹문서 인코딩 UTF-8  (0) 2013.10.13
IE호환성보기 버튼 제거 - META태그 이용  (0) 2013.10.13
댓글