HTML Graphics

HTML Canvas Graphics

<canvas> : 웹 페이지에서 그림을 그릴때 사용하는 컨테이너이다.

canvas는 HTML 페이지 내의 직사각형의 영역이다. 경계선이나 content가 없는것이 기본값이이며 그림을 실제로 그리기 위해선 자바스크립트를 사용 해야한다. 

id, width, height, style 

 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

 

---

Draw a Line

 

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

 

---

Draw a Circle

 

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

 

---

Draw a Text

 

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

 

---

Stroke Text

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

---

Draw Linear Gradient

 

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

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"darkblue");
grd.addColorStop(1,"lightblue");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

 

---

Draw 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,"white");
grd.addColorStop(1,"darkgreen");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

 

---

HTML SVG Graphics

Scalable Vector Graphics의 약자로 웹페이지에 그래픽 표현을 위해 사용됨

 

<svg> : SVG 그래픽을 위한 컨테이너이다

 

SVG Circle

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

 

---

SVG Rectangle

 

<svg width="200" height="100">
  <rect width="200" height="100" 
  style="fill:rgb(120,160,190);stroke-width:10;stroke:rgb(100,100,100)" />
</svg>

 

---

SVG Rounded Rectangle

 

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:pink;stroke:red;stroke-width:5;opacity:0.5" />
</svg>

 

---

SVG Star

 

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:salmon;stroke:olive;stroke-width:5;fill-rule:evenodd;" />
</svg>

 

---

SVG Logo

 

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

 

---

Comparison of Canvas and SVG

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

---