html5 canvas

|

1. Canvas 태그 선언

  - 2d 드로잉을 할 경우 태그 선언과 스크립트 사용

  - 태그는 id, 높이, 넒이 속성 정의 함

  - 크롬,파이어폭스,사파리,오페라에서는 지원하나, IE8 까지는 지원하지 않고, IE9에서는 플러그인 형태로 일부 지원함


<html>

 <head>

  <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, 55, 50);


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

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

      }

    }

  </script>

 </head>

 <body onload="draw();">

   <canvas id="canvas" width="150" height="150"></canvas>

 </body>

</html>



2. Canvas 예제

  - 선그리기

    - cxt.moveTo(10,10);

    - cxt.lineTo(150,50);

    - cxt.stroke();

  - 원그리기

    - cxt.fillStyle="#FF0000";

    - cxt.beginPath();

    - cxt.arc(70,18,15,0,Math.PI*2,true);

    - cxt.closePath();

    - cxt.fill();

  - 그라데이션

    - var grd=cxt.createLinearGradient(0,0,175,50);

    - grd.addColorStop(0,"#FF0000");

    - grd.addColorStop(1,"#00FF00");

    - cxt.fillStyle=grd;

    - cxt.fillRect(0,0,175,50);


  - 예제 url

    http://www.ryancarson.com/uploads/canvas/smiley.html

    http://www.ryancarson.com/uploads/canvas/portrait.html

    http://js-fireworks.appspot.com/

    http://www.efeion.com/canvastest/test.html

    http://canvaspaint.org/



3. Canvas Javascript Api

  - 상태 저장

    - trnasformation matrix, clipping region, 브러쉬 스타일, 텍스트 정렬, 그림자 offset 등의 상태를 저장

  - 화면 축소, 확대, 회전 등의 transformation 지원

  - alpha blending 지원

  - 스타일 지정 기능과, drawing 함수들


  - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

interface CanvasRenderingContext2D {

  // back-reference to the canvas
  readonly attribute HTMLCanvasElement canvas;

  // state
  void save(); // push state on state stack
  void restore(); // pop state stack and restore state

  // transformations (default transform is the identity matrix)
  void scale(in double x, in double y);
  void rotate(in double angle);
  void translate(in double x, in double y);
  void transform(in double a, in double b, in double c, in double d, in double e, in double f);
  void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);

  // compositing
           attribute double globalAlpha; // (default 1.0)
           attribute DOMString globalCompositeOperation; // (default source-over)

  // colors and styles
           attribute any strokeStyle; // (default black)
           attribute any fillStyle; // (default black)
  CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);
  CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

  // line caps/joins
           attribute double lineWidth; // (default 1)
           attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
           attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
           attribute double miterLimit; // (default 10)

  // shadows
           attribute double shadowOffsetX; // (default 0)
           attribute double shadowOffsetY; // (default 0)
           attribute double shadowBlur; // (default 0)
           attribute DOMString shadowColor; // (default transparent black)

  // rects
  void clearRect(in double x, in double y, in double w, in double h);
  void fillRect(in double x, in double y, in double w, in double h);
  void strokeRect(in double x, in double y, in double w, in double h);

  // path API
  void beginPath();
  void closePath();
  void moveTo(in double x, in double y);
  void lineTo(in double x, in double y);
  void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);
  void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
  void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);
  void rect(in double x, in double y, in double w, in double h);
  void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
  void fill();
  void stroke();
  void clip();
  boolean isPointInPath(in double x, in double y);

  // focus management
  boolean drawFocusRing(in Element element, in double xCaret, in double yCaret, in optional boolean canDrawCustom);

  // text
           attribute DOMString font; // (default 10px sans-serif)
           attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
           attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
  void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);
  void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);
  TextMetrics measureText(in DOMString text);

  // drawing images
  void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);
  void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
  void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);
  void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
  void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
  void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

  // pixel manipulation
  ImageData createImageData(in double sw, in double sh);
  ImageData createImageData(in ImageData imagedata);
  ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
  void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
};

interface CanvasGradient {
  // opaque object
  void addColorStop(in double offset, in DOMString color);
};

interface CanvasPattern {
  // opaque object
};

interface TextMetrics {
  readonly attribute double width;
};

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute CanvasPixelArray data;
};

interface CanvasPixelArray {
  readonly attribute unsigned long length;
  getter octet (in unsigned long index);
  setter void (in unsigned long index, in octet value);
};


3. Canvas Graph

  - 구글 chart api

    - http://code.google.com/intl/ko-KR/apis/chart/docs/chart_wizard.html

  - RGrpah HTML5 canvas graph library

    - http://www.rgraph.net/

  - http://kmoonki.tistory.com/218

저작자 표시 비영리 변경 금지
신고
Trackback 0 And Comment 0

티스토리 툴바