[html] html5, canvas, SVG

정예은·2019년 12월 26일

html web

web

목록 보기

4/27

이 페이지에서 나온 코드를 실행한 페이지: http://marin.dothome.co.kr/2020Camp/class/html3.html

DOCTYPE, encoding(charset)이 간단해졌다.

새롭게 생긴 elements:
semantic element(

, , , )
attributes of form element(number, date...)
graphic elemnts(,

multimedia elements(, )

모든 브라우저에서 HTML5를 지원한다.

semantic Elemnets

브라우저와 개발자 모두에게 사용된 의미를 명확하게 전달해주는 요소

non-semantic example: div, span...

semantic example: form, table, article...

canvas

직사각형 공간으로 default일때 테두리가 없다. 아래처럼 적을 수 있고 테두리를 만들기 위해서는 style="border:1px solid #000000;", 이런 식으로 style 값을 주면 된다.

<canvas id="myCanvas" width="200" height="100"></canvas>

스크린샷 2019-12-26 오후 2.08.02.png

선그리기

<script>
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); <!--0,0부터-->
ctx.lineTo(200, 100); <!--200,100까지 선 그리기-->
ctx.stroke();<!--선 그린 것을 canvas에 반영(이것 안 쓰면 안 그려짐-->
</script>

스크린샷 2019-12-26 오후 2.11.42.png

원 그리기

<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>

스크린샷 2019-12-26 오후 2.15.05.png

텍스트 그리기

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

스크린샷 2019-12-26 오후 2.15.17.png

stroke text

<script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.font = "30px Arial";
 ctx.strokeText("Hello World", 10, 50);
</script>

스크린샷 2019-12-26 오후 2.19.38.png

Linear Gradient

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// gradient 생성
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// gradient 채우기
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

스크린샷 2019-12-26 오후 2.23.13.png

Circular Gradient

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // Create gradient
  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>

스크린샷 2019-12-26 오후 2.23.36.png

이미지 넣기

  <img id="velog" src="../img/velog.png" alt="velog" width="100" height="100">
  <!--img 태그는 body 안에 있어야 함-->
<script>
  var c = document.getElementById("myCanvas7");
  var ctx = c.getContext("2d");
  var img = document.getElementById("velog");
  ctx.drawImage(img, 10, 10);
</script>

스크린샷 2019-12-26 오후 2.29.54.png

SVG (Scalable Vector Graphics)

vector를 사용해서 그림 그리는 것

원

<!DOCTYPE html>
<html>
  <body>

  	<svg width="100" height="100">
      	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>

  </body>
</html>

스크린샷 2019-12-26 오후 2.32.58.png

직사각형

<svg width="400" height="100">
	<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

스크린샷 2019-12-26 오후 2.34.12.png

모서리가 둥근 정사각형

<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" />
</svg>

스크린샷 2019-12-26 오후 2.37.25.png

별

<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;" />
</svg>

스크린샷 2019-12-26 오후 2.37.42.png

로고

<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>