ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Canvas Tutorials
    lang/js 2019. 12. 17. 08:30

    캔버스 튜토리얼

    <canvar> 요소

    <canvas id="tutorial" width="150" height="150"></canvas>
    <!-- default width: 300px, height: 150px -->
    <!-- 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다.  -->
    <!-- CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 . -->
    <!-- 만약 렌더링이 왜곡된 것처럼 보이는 경우  -->
    <!-- CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오. -->

    대체 콘텐츠

    <canvas id="stockGraph" width="150" height="150">
      current stock price: $3.15 +0.15
    </canvas>
    
    <canvas id="clock" width="150" height="150">
      <img src="images/clock.png" width="150" height="150" alt=""/>
    </canvas>
    <!-- 대체 컨텐츠를 제공하는 것은 매우 간단합니다. <canvas>태그 안에  대체 컨텐츠를 삽입합니다.  -->
    <!-- <canvas>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다.  -->
    <!-- <canvas>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다. -->
    <!-- 대체 컨텐츠가 제공되는 방식때문에, <img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)가 필요합니다.  -->
    <!-- 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다. -->

    렌더링 컨텍스트

    <canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.

    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');
    // document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다.  
    // 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

    지원여부 검사

    var canvas = document.getElementById('tutorial');
    
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      // drawing code here
    } else {
      // canvas-unsupported code here
    }

    템플릿 뼈대

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <title>Canvas tutorial</title>
        <script type="text/javascript">
          function draw(){
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext){
              var ctx = canvas.getContext('2d');
            }
          }
        </script>
        <style type="text/css">
          canvas { border: 1px solid black; }
        </style>
      </head>
      <body onload="draw();"> <!-- 문서가 load 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. -->
        <canvas id="tutorial" width="150" height="150"></canvas>
      </body>
    </html>

    기본 예제

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8"/>
      <script type="application/javascript">
        function draw() {
          var canvas = document.getElementById("canvas");
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
    
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (10, 10, 50, 50);
    
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 50, 50);
          }
        }
      </script>
     </head>
     <body onload="draw();">
       <canvas id="canvas" width="150" height="150"></canvas>
     </body>
    </html>

    예제 결과

    'lang > js' 카테고리의 다른 글

    JavascriptHTMLDialogElement.returnValue  (0) 2019.12.19
    Javascript EventTarget()  (0) 2019.12.18
    Canvas Tutorials  (0) 2019.12.17
    VanillaJS Form serialize()  (0) 2019.12.16
    JS Function.method  (0) 2019.12.11
    JS Array.Method  (0) 2019.12.10

    댓글 0

Designed by Tistory.