본 글에 있는 대부분의 내용들(drawWindow에 대한 문서는 제외)은 Canvas tutorial에 취합되어 폭넓게 다뤄지고 있으므로, 본 페이지는 Canvas tutorial로 redirect하는 것이 좋을듯 합니다.
소개
Firefox 1.5에서 Firefox는 프로그래밍이 가능한 새로운 HTML 요소를 포함합니다. <canvas>는 Apple이 사파리에 <canvas>를 구현할 때 기반이 되었던 WHATWG canvas 명세를 기반으로 하고 있습니다. 그래프를 그리거나, UI 요소, 그 외에도 클라이언트에서의 다른 여러 그래픽 작업에 사용될 수 있습니다.
<canvas>는 크기가 고정되어 있으며 하나 이상의 렌더링 문맥을 가지는 그리기 영역을 만듭니다. 우리는 (현재 유일하게 정의되어 있기도 한) 2차원 렌더링 문맥에 초점을 맞출 것입니다. 나중에는 다른 렌더링 방법을 지원하는 문맥이 만들어질 수도 있습니다; 예를 들어서, <canvas> 명세에 OpenGL ES에 기반한 3차원 렌더링 문맥이 추가될 가능성이 높습니다.
2차원 렌더링 문맥
간단한 예제
우선 겹치는 두 사각형을 그리는 간단한 예제부터 시작합시다. 그 중 하나에는 알파 투명도도 적용되어 있습니다:
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 50, 50);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
draw 함수는 canvaa 요소를 받아서 2d 문맥을 얻습니다. ctx 객체는 실제로 캔버스에 렌더링하는데 사용되었습니다. 예제는 단순히 두 사각형을 색칠하는데, CSS 색 명세를 써서 fillStyle(채움 스타일)에 서로 다른 두 색을 지정하고 fillRect 메소드를 호출합니다. 두번째 fillStyle에서는 rgba()를 사용해서 색상과 함께 알파 값을 지정했습니다.
fillRect, strokeRect, clearRect는 각각 채워진 사각형을 그리거나, 사각형의 외곽선을 그리거나, 사각형 영역을 지웁니다. 복잡한 모양을 그리려면 경로(path)를 사용합니다.
경로 사용하기
beginPath 함수는 새로운 경로를 시작하고, moveTo, lineTo, arcTo, arc 등의 메소드는 경로의 부분을 추가하기 위해 사용됩니다. 경로는 closePath로 끝맺을 수 있습니다. 한 번 경로가 만들어지면, fill이나 stroke 메소드를 사용해 캔버스에 경로를 렌더링할 수 있습니다.
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
// 기존: ctx.quadraticCurveTo(60, 70, 70, 150); 잘못됨.
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- 오른쪽 이미지를 출력하기 위한 정확한 식 ->
ctx.lineTo(30, 30);
ctx.fill();
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
fill()나 stroke()를 호출하면 현재 경로는 다시 사용할 수 없습니다. 다시 한 번 경로 영역을 채우거나 외곽선을 그리려면 새로 경로를 생성해야 합니다.
그래픽 상태
fillStyle, strokeStyle, lineWidth, lineJoin 같이 문맥 객체에 있는 속성들은 현재 그래픽 상태의 일부분입니다. 문맥에서는 현재 상태를 상태 스택에 넣거나 빼는 save()와 restore() 메소드를 제공합니다.
좀 더 복잡한 예제
다음은 조금 더 복잡한 예제로, 경로와 상태를 사용하며 현재 변환 행렬이 새로 등장합니다. 문맥 메소드 translate(), scale(), rotate()는 모두 현재 행렬을 변환시킵니다. 렌더링되는 모든 점들은 먼저 이 행렬을 써서 변환됩니다.
<html>
<head>
<script type="application/x-javascript">
function drawBowtie(ctx, fillStyle) {
ctx.fillStyle = "rgba(200,200,200,0.3)";
ctx.fillRect(-30, -30, 60, 60);
ctx.fillStyle = fillStyle;
ctx.globalAlpha = 1.0;
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(-25, -25);
ctx.lineTo(25, -25);
ctx.lineTo(-25, 25);
ctx.closePath();
ctx.fill();
}
function dot(ctx) {
ctx.save();
ctx.fillStyle = "black";
ctx.fillRect(-2, -2, 4, 4);
ctx.restore();
}
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 앞으로 나올 모든 변환들은 이 변환에 상대적임
ctx.translate(45, 45);
ctx.save();
//ctx.translate(0, 0); // 불필요함
drawBowtie(ctx, "red");
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(85, 0);
ctx.rotate(45 * Math.PI / 180);
drawBowtie(ctx, "green");
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(0, 85);
ctx.rotate(135 * Math.PI / 180);
drawBowtie(ctx, "blue");
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(85, 85);
ctx.rotate(90 * Math.PI / 180);
drawBowtie(ctx, "yellow");
dot(ctx);
ctx.restore();
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
여기서는 네 번 호출되는 두 메소드 drawBowtie와 dot을 정의합니다. 각각의 호출 전에 translate()와 rotate()가 현재 변환 행렬을 준비하는 데 사용되는데, 이는 점과 나비 넥타이 모양의 위치를 지정합니다. dot은 (0, 0)이 중심인 작고 까만 사각형을 그립니다. 이 점은 변환 행렬에 따라 이동됩니다. drawBowtie는 간단한 나비 넥타이 경로를 인자로 받은 채움 스타일에 따라 그립니다.
행렬 연산이 계속 누적되기 때문에, 매번 호출할 때마다 save()와 restore()를 써서 원래 캔버스 상태를 되돌립니다. 주의해야 할 점으로는 회전이 항상 현재 원점을 기준으로 일어 난다는 것입니다; 따라서 translate() rotate() translate() 순서대로 호출한 결과는 translate() translate() rotate()와 다른 결과를 낼 것입니다.
Apple <canvas>와의 호환성
대부분의 경우 <canvas>는 Apple의 구현과 다른 구현들과 호환됩니다. 하지만 몇 가지 알 필요가 있는 사항은 여기서 설명합니다.
</canvas> 태그의 필요
Apple 사파리 구현에서는 <canvas> 엘리먼트가 <img>와 매우 비슷한 방법으로 구현됩니다; 닫는 태그가 필요하지 않습니다. 하지만 <canvas>가 웹 상에서 널리 쓰이기 위해서는 뭔가 대체 내용을 넣는 방법을 제공해야 합니다. 따라서 모질라의 구현에서는 닫는 태그가 꼭 필요합니다.
만약 대체 내용이 필요하지 않다면, 간단하게 <canvas id="foo" ...></code>라고 해도 사파리와 모질라에서 완전히 호환될 것입니다 -- 사파리는 그냥 닫는 태그를 무시할 것입니다.
대체 내용이 필요하다면, 약간의 CSS 트릭을 써서 (캔버스 뒤에 표시될) 대체 내용을 사파리가 보여주지 않도록 해야 하며, 이 내용이 IE에서는 보이도록 다시 CSS 트릭을 써야 합니다. Todo: get hixie to put the CSS bits in
추가적인 기능
웹 내용을 캔버스에 렌더링하기
모질라의 canvas는 drawWindow 메소드로 확장할 수 있습니다. 이 메소드는 DOM window의 현재 내용을 캔버스에 그립니다. 예를 들어서,
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
이 코드는 현재 창의 내용을 캔버스의 (0,0)-(100,200) 사각형에 검은 바탕으로 그리는데, 좌표는 뷰포트(viewport)의 왼쪽 위 모서리에 상대적입니다. 색깔을 "rgba(0,0,0,0)"으로 지정하면 내용은 투명 배경으로 그려질 것입니다 (느려질 수 있음).
이 방법을 사용하면, 임의의 내용(CSS 스타일이 적용된 HTML 텍스트나 SVG)이 들어 있는 숨겨진 IFRAME을 채우고 캔버스에 그릴 수 있습니다. 현재 변환에 따라 확대 및 축소하거나, 회전도 가능합니다.
Ted Mielczarek의 tab preview 확장기능은 이 기법을 크롬에서 웹 페이지의 축소 이미지를 만드는 데 사용했고, 소스 코드는 참고를 위해 공개되어 있습니다.