출처 : http://caniuse.com/#feat=canvas
"can I use..." 사이트에 따르면, HTML5 의 Canvas 는 최신버전의 모든 브라우저에서 제공합니다. ( Opera Mini 버전은 partial 지원이군요. ). 즉 별 부담없이 사용하시면 되겠습니다.
Canvas 정의
- Canvas 에 그림을 그리기 위해서는 HTML 에서 canvas 를 정의해주고, JavaScript 코드를 이용하여 그림을 그려야 합니다.
<html>
...
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById( "canvas" );
var canvas2d = canvas.getContext( "2d" );
canvas2d.fillStyle = "rgba( 0, 0, 200, 1 )";
canvas2d.fillRect( 30, 30, 75, 70 );
....
}
</script>
<body>
<canvas id="canvas" width="600" height="500"/>
...
</html>
- 2DCanvas 는 canvas.getContext( "2d" ) 를 통해 얻어올 수 있다.
스타일
- canvas.fillStyle = any // ( 디폴트 검은색 )
- canvas.strokeStyle = any // ( 디폴트 검은색 )
선 스타일 설정
- canvas.lineCap = DOMString // "butt", "round", "squre" ( 디폴트 "butt" )
- canvas.lineJoin = DOMString // "miter", "round", "bevel" ( 디폴트 "miter" )
- canvas.lineWidth = float // ( 디폴트 1 )
- canvas.miterLimit = float // ( 디폴트 10 )
그림자 적용하기
- canvas.shadowBlur = float // ( 디폴트 0 )
- canvas.shadowColor = DOMString // ( 디폴트 투명한 검은색 )
- canvas.shadowOffsetX = float // ( 디폴트 0 )
- canvas.shadowOffsetY = float // ( 디폴트 0 )
사각형 그리기
- canvas.clearRect( float left, float top, float width, float height );
- canvas.fillRect( float left, float top, float width, float height );
- canvas.strokeRect( float left, float top, float width, float height );
복잡한 도형 그리기
- canvas.arc( float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise );
- canvas.arcTo( float x1, float y1, float x2, float y2, float radius );
- canvas.beginPath();
- canvas.bezierCurveTo( float cpx1, float cpy1, float cpx2, float cpy2, float x, float y );
- canvas.clip();
- canvas.closePath();
- canvas.fill();
- canvas.lineTo( float x, float y );
- canvas moveTo( float x, float y );
- canvas quadraticCurveTo( float cpx, float cpy, float x, float y );
- canvas.rect( float left, float top, float width, float height );
- canvas.stroke();
- canvas.booleanisPointInPath( float x, float y );
문자열 그리기
- canvas.font = DOMString // ( 디폴트 10px sans-serif체 )
- canvas.textAlign = DOMString // "start", "end", "left", "right", "center" ( 디폴트 : "start " )
- canvas.textBaseLine = DOMString
// "top". "hanging", "middle", "alphabetic", "ideographic", "bottom" ( 디폴트 : "alphabetic" )
- canvas.fillText( DoMString text, float x, float y, optional float maxWidth );
- canvas.strokeText( DOMString text, float x, float y, optional float maxWidth );
- canvas.TextMetricsmeasureText( DOMString text );
이미지 그리기
- canvas.drawImage( HTMLImageElement image, float dx, float dy, optional float dw, float dh );
- canvas.drawImage( HTMLImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh );
- canvas.drawImage( HTMLCanvasElement image, float dx, float dy, optional float dw, float dh );
- canvas.drawImage( HTMLCanvasElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh );
- canvas.drawImage( HTMLVideoElement image, float dx, float dy, optional float dw, float dh );
- canvas.drawImage( HTMLVideoElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh );
도형 변환
- canvas.rotate( float angle );
- canvas.scale( float x, float y );
- canvas.translate( float x, float y );
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>
Canvas Example
</title>
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById( "canvas" );
var canvas2d = canvas.getContext("2d");
// Rectangles
canvas2d.fillStyle = "rgba( 0, 0, 200, 1 )";
canvas2d.fillRect( 30, 30, 75, 70 );
canvas2d.fillStyle = "rgba(200, 200, 0, 1 )";
canvas2d.fillRect( 70, 50, 55, 70 );
canvas2d.fillStyle = "rgba( 200, 0, 0, 1 )";
canvas2d.fillRect( 90, 50, 75, 50 );
// Filled triangle
canvas2d.fillStyle = "rgba( 0, 200, 0, 0.5 )";
canvas2d.beginPath();
canvas2d.moveTo( 225, 25 );
canvas2d.lineTo( 305, 25 ); // Canvas 상 절대위치f
canvas2d.lineTo( 225, 105 );
canvas2d.closePath();
canvas2d.fill();
// Stroked triangles
canvas2d.beginPath();
canvas2d.strokeStyle = "rgba( 200, 0, 0, 0.5 )";
canvas2d.moveTo( 110, 205 );
canvas2d.lineTo( 110, 125 );
canvas2d.lineTo( 30, 205 );
canvas2d.closePath();
canvas2d.stroke();
canvas2d.beginPath();
canvas2d.moveTo( 100, 205 );
canvas2d.lineTo( 100, 125 );
canvas2d.lineTo( 20, 205 );
canvas2d.closePath();
canvas2d.stroke();
canvas2d.beginPath();
canvas2d.moveTo( 90, 205 );
canvas2d.lineTo( 90, 125 );
canvas2d.lineTo( 10, 205 );
canvas2d.closePath();
canvas2d.stroke();
// Heart
canvas2d.fillStyle = "rgba( 200, 0, 0, 0.5 )";
canvas2d.beginPath();
canvas2d.moveTo( 75, 250 );
canvas2d.bezierCurveTo( 75, 247, 70, 235, 50, 235 );
// cpx1, cpy1, cpx2, cpy2, x, y
canvas2d.bezierCurveTo( 20, 235, 20, 272.5, 20, 272);
canvas2d.bezierCurveTo( 20, 290, 40, 312, 75, 330 );
canvas2d.bezierCurveTo( 110, 312, 130, 290, 130, 272 );
canvas2d.bezierCurveTo( 130, 272.5, 130, 235, 100, 235 );
canvas2d.bezierCurveTo( 85, 235, 75, 247, 75, 250 );
canvas2d.closePath();
canvas2d.fill();
// Quadratic curves
canvas2d.strokeStyle = "rgba( 0, 0, 0, 1 )";
canvas2d.beginPath();
canvas2d.moveTo( 275, 125 );
canvas2d.quadraticCurveTo( 225, 125, 225, 162 ); // cpx, cpy, x, y
canvas2d.quadraticCurveTo( 260, 200, 265, 200 );
canvas2d.quadraticCurveTo( 325, 200, 325, 162 );
canvas2d.quadraticCurveTo( 325, 125, 275, 125 );
canvas2d.closePath();
canvas2d.stroke();
// Arcs
canvas2d.beginPath();
canvas2d.arc( 275,275,50,0,Math.PI * 2, true );
canvas2d.moveTo( 310, 275 );
canvas2d.arc( 275,275,35,0,0.75*Math.PI, false);
canvas2d.moveTo( 300, 255 );
canvas2d.arc( 265,255,35,0,0.5*Math.PI, false);
canvas2d.moveTo( 200, 255 );
canvas2d.arc( 245,255,35,0,0.2*Math.PI, false );
canvas2d.closePath();
canvas2d.stroke();
canvas2d.font = "italic 40px sans-serif";
canvas2d.strokeText( "Hello!", 50, 400 );
}
</script>
</head>
<body onload = "loader()">
<h1>Canvas Example</h1>
<canvas id="canvas" width="600" height="500"/>
</body>
</html>
<결과>
canvas.html'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
|---|---|
| [HTML5] 드래그 앤 드롭 ( Drag and Drop ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] HTML5 개요 ( 기본 ) (2) | 2012.09.05 |
| [xHTML] xHTML Tutorial. #2 (xHTML 해부) (0) | 2012.02.28 |
| [xHTML] xHTML Tutorial. #1 (xHTML이 무엇인가요?) (0) | 2012.02.28 |
댓글