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
3. Canvas Javascript Api
- 상태 저장
- trnasformation matrix, clipping region, 브러쉬 스타일, 텍스트 정렬, 그림자 offset 등의 상태를 저장
- 화면 축소, 확대, 회전 등의 transformation 지원
- alpha blending 지원
- 스타일 지정 기능과, drawing 함수들
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
'개발/활용정보 > Web (JavaScript, CSS, Xml)' 카테고리의 다른 글
| URL Encoding Reference (0) | 2011.10.12 |
|---|---|
| JSP 페이지 이동 방법 (0) | 2011.04.19 |
| AJAX - Finally 로 IE6 메모리 누수 해결 (0) | 2011.04.13 |
| IE Memory Leak (0) | 2011.04.13 |
| JavaScript - 개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기 (0) | 2011.04.13 |
