생각2009.07.21 23:59

<html>
  <head>
    <title>Canvas demo</title>
    <script type="text/javascript">
      function draw () {
        var canvas = document.getElementById ('hello');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.fillRect (25, 25, 50, 50);
        }
      }
    </script>

    <style type="text/css">
      canvas { border: 2px solid red; }
    </style>
  </head>

  <body onload="draw ();">
    <canvas id="hello" width="100" height="100"></canvas>
  </body>

</html>

HTML5의 Canvas 요소는 그래픽을 표현할 수 있는 요소입니다. 차후 Flash나 실버라이트를 부분적으로 대채할 수 있을 정도로 뛰어난 기능을 나타내는 것 같습니다.

JQuery로 유명한 존 레식이 참여하고 있는 Processing.js 보면 Javascript로 Canvas 요소를 쉽게 사용할 수 있습니다.

http://processingjs.org/

다만 아직 IE에서는 canvas 요소를 지원하지 않습니다. http://excanvas.sourceforge.net/ 를 이용해서 따로 별도의 자바스크립트를 추가해야 합니다.

http://hascanvas.com 에 가면 HTML의 Canvas 를 활용한 다양한 예제를 볼 수 있습니다.



저작자 표시 비영리 변경 금지
신고
Posted by 꿍스