티스토리 뷰

정보 보관 ver1.0

Canvas란

James Wetzel 2012. 12. 14. 19:47
  1. Canvas Element
    <canvas>는 스크립트(보통 JavaScript)를 이용해 그림을 그리는 새로운 HTML 요소입니다.
    그래프를 그리거나 사진합성 혹은 간단한(그리고 단순하지 않은 것도) 애니메이션을 제작하는데 쓰일 수도 있습니다.
  2. Canvas Element 사용
    <canvas id="myCanvas" width="300" height="150"></canvas>
  3. Canvas Element 대체 내용
    <canvas id="myCanvas" width="300" height="150"> 브라우져에서 캔버스를 지원하지 않는군요.! </canvas>
    <canvas id="myCanvas" width="300" height="150"> <img src="" alt="" width="300" height="150"> </canvas>
    canvas의 기본 사이즈는 300 * 150 입니다.(width, height 속성을 지정하지않으면 기본 값 적용됨)


Canvas 객체 생성

<script type="text/javascript">
    var canvasElement = document.getElementById("myCanvas");
    if(canvasElement.getContext){
        var canvas = canvasElement.getContext('2d')
    }
    else{
        //canvas를 지원하지 않는 브라우져.!
    }    
</script>


Canvas 템플릿

<!DOCTYPE html>

<html>

<head>

    <title>Canvas Templet</title>

    <script type="text/javascript">

        window.onload = function () {

            function docLoad() {

                var canvasElement = document.getElementById('myCanvas');

                if (canvasElement.getContext) {

                    var canvas = canvasElement.getContext('2d');

                }

            }

        }

    </script>

    

    <style type="text/css">

        canvas

        {

            border: 1px solid red;            

        }

    </style>

</head>

<body oload="docLoad();">

    <canvas id="myCanvas" width="300" height="150">캔버스를 지원하지 않는 브라우져는 해당 메세지를 출력합니다.!</canvas>

</body>

</html>


Canvas 샘플

<!DOCTYPE html>

<html>

<head>

    <title>Canvas Templet</title>

    <script type="text/javascript">        

        function docLoad() {

            var canvasElement = document.getElementById('myCanvas');

            if (canvasElement.getContext) {

                var canvas = canvasElement.getContext('2d');


                canvas.fillStyle = "rgb(200, 0, 0)";

                canvas.fillRect(10, 10, 55, 50);


                canvas.fillStyle = "rgba(0, 0, 200, 0.5)";

                canvas.fillRect(30, 30, 55, 50);

            }

        }

    </script>

    

    <style type="text/css">

        canvas

        {

            border: 1px solid red;            

        }

    </style>

</head>

<body onload="docLoad();">

    <canvas id="myCanvas" width="300" height="150">캔버스를 지원하지 않는 브라우져는 해당 메세지를 출력합니다.!</canvas>    

</body>

</html>




728x90
반응형
저작자표시 비영리 동일조건 (새창열림)