waitedForU
[04] HTML5 Graphics 본문
1. Canvas
- 태그를 이용하여 그릴수 있는 그래픽 기능 지원.
- 태그를 이용하여 그릴수 있는 그래픽 기능 지원.
- 기준 좌표: 화면 좌표계를 사용함, 좌측 상단이 0,0
- <canvas>는 웹 페이지에 실시간으로 그래픽을 그리는 데 사용됨
1024 X 768의 경우
0,0
+----------------------+
| |
| |
| |
| |
| |
+----------------------+ 1023, 767
>>>>>> canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
- javascript와 같이 사용한 <canvas>
- fillRect() :채워진 사각형
>>>>> canvas1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</body>
</html>
- moveTo(x,y) 시작되는 지점
- lineTo(x,y) 끝나는 지점
- stroke() 선그리기
>>>>>>>> canvas2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
- arc(x,y,r,start,stop)
- 선을 이용해서 원을 그리기 위해서 stroke(), fill() 메소드를 호출함
>>>>>>> canvas3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
- canvas에 글자 그리기
- fillText(text,x,y) - 채워진 글자그리기
- strokeText(text,x,y) - 채워지지 않은 글자 그리기
>>>>>>>> canvas4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
//ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
- 그라디언트의 두 가지 종류가 있습니다 :
- createLinearGradient (X, Y, X1, Y1)는 - 선형 그라데이션
- createRadialGradient (X, Y, R, X1, Y1, R1은) - 방사형 / 원형의 그라데이션
>>>>>> canvas5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
//var grd=ctx.createLinearGradient(0,0,200,0);
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
- canvas에 이미지 그리기
- drawImage(image,x,y)
>>>>>> canvas6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
2. SVG
1) Circle, Ractangle
>>>>> circle.html
2. SVG
1) Circle, Ractangle
>>>>> circle.html
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
>>>>> rectangle.html
>>>>> rectangle.html
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
2) Rounded Rectangle, Star
>>>>> rounded.html
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
>>>>> star.html
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
3) SVG Logo
3) SVG Logo
>>>>> svglog.html
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
'HTML5' 카테고리의 다른 글
| [03] HTML5 Forms (0) | 2016.05.24 |
|---|---|
| [02] Semantic Elements(의미가 있는 요소) (0) | 2016.05.24 |
| [01] HTML5 소개 (0) | 2016.05.24 |
Comments