HTML Graphics

HTML Canvas란?

<canvas> 태그를 그래픽을 그리는데에 사용된다. 기본 값은 테두리와 내용이 없다. id를 꼭 설정해주도록 하자.

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

대각선 그리기

<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var c= document.getElementById("mycanvas");
        var ctx = c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(200,100);
        ctx.stroke();
</script>

원 그리기

<canvas id="mycanvas2" width="200" height="100" style="border:1px solid #00ff2a;"></canvas>
    <script>
        var c= document.getElementById("mycanvas2");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2*Math.PI);
        ctx.stroke();
</script>

문구 그리기

<canvas id="mycanvas3" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var c= document.getElementById("mycanvas3");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
 </script>

테두리만 있는 문구(Stroke text) 그리기

<canvas id="mycanvas2" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var c= document.getElementById("mycanvas2");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.strokeText("안녕하세요", 10, 50);
</script>

Linear Gradient 그리기

<canvas id="mycanvas4" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var c = document.getElementById("mycanvas4");
        var ctx = c.getContext("2d");
        // Create gradient
        var grd = ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");
        // Fill with gradient
        ctx.fillStyle = grd;
        ctx.fillRect(10,10,150,80);
</script>

Circular gradient 그리기

<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<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>

이미지 그리기

<p>Image to use:</p>
<img id="scream" src="./img/scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="imagecanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the THML canvas tag</canvas><br>
<button onclick="imagecanvas()">Try it</button><br>
    
 <script>
        function imagecanvas() {
        var c = document.getElementById("imagecanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img,10,10);
        }
 </script>

HTML SVG Graphics

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현할때 사용되며, 확대해도 화질이 깨지지 않는 특징을 가지고 있다. <svg> 태그를 이용해서 표현한다.

SVG 원

<svg width="100" height="100">
        <circle cx="50" cy="50" r="40"
        stroke="green" stroke-width="4" fill="orange" />
      Sorry, your browser does not support inline SVG.
</svg>

SVG 직사각형

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

SVG 모서리가 둥근 직사각형

<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" />
        <text fill="#ffffff" font-size="20" font-family="Verdana" x="73" y="86">2020Camp</text>
</svg>

SVG 별

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

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>

• SVG 그래픽 안에 문구를 넣고 싶으면:
  • <text fill="" font-size="" font-family="" x="" y="">넣고 싶은 문구</text>