HTML5 Canvas 시작하기(1) - 기본 개념_html5 튜토리얼 기술

캔버스란

는 HTML5에 정의된 새로운 HTML 요소입니다. 이 요소는 일반적으로 JavaScript를 통해 HTML 페이지에서 그래픽 그리기, 이미지 합성 등을 수행하는 데 사용할 수 있으며 일부 애니메이션을 수행하는 데에도 사용할 수 있습니다. 물론 HTML5 사양은 아직 초안 단계이고 공식 출시는 2010년까지 기다려야 할 수도 있지만, 많은 브라우저는 이미 HTML5 사양의 일부를 지원하고 있습니다. 현재 캔버스 요소를 지원하는 브라우저는 Firefox 3, Safari 4, Chrome 2.0 등입니다. 따라서 이 페이지의 예제를 실행할 때 위 브라우저 중 하나를 사용하고 있는지 확인하시기 바랍니다.

Mozilla에는 캔버스에 대한 튜토리얼이 많지만, 저는 학습 과정을 기록하기로 했습니다. 내가 작성한 내용이 충분히 명확하지 않다고 생각되면 참고 자료에서 Mozilla 웹사이트의 Canvas 튜토리얼 링크를 찾을 수 있습니다.

또한 여기에서 몇 가지 흥미로운 캔버스 예제를 찾을 수 있습니다.

캔버스 시작하기

캔버스를 사용하는 것은 매우 간단합니다. 다른 HTML 요소를 사용하는 것과 마찬가지로 페이지에 태그만 추가하면 됩니다.

코드 복사

코드는 다음과 같습니다.

물론 이는 단순히 Canvas 객체를 생성하고 이에 대해 어떤 작업도 수행하지 않습니다. 이 캔버스는 time 요소는 div 요소와 다르지 않아 페이지에 아무것도 표시되지 않습니다.)
또한 canvas 요소의 크기는 width 및 height 속성을 통해 지정할 수 있으며 이는 img 요소와 다소 유사합니다. .
Canvas의 핵심: Context
앞서 언급했듯이 Canvas 객체는 JavaScript를 통해 조작하여 그래픽 그리기, 이미지 합성 등을 수행할 수 있습니다. 이러한 작업은 Canvas 객체 자체를 통해 수행되지 않으며, 하지만 Canvas 객체의 getContext 메소드를 통해 Canvas 작업 컨텍스트를 획득하여 수행됩니다. 즉, 나중에 Canvas 개체를 사용할 때 Canvas 개체의 Context를 다루게 되며, Canvas 개체 자체를 사용하여 Canvas 개체의 크기와 같은 정보를 얻을 수 있습니다.
캔버스 개체의 컨텍스트를 가져오는 것은 매우 간단합니다. 호출할 때 현재 사용 가능한 유일한 유형 값은 2d입니다.

<canvas id="screen" width="400" height="400"></canvas> <스크립트 유형="텍스트/자바스크립트"> var canvas = document.getElementById("screen"); var ctx = canvas.getContext("2d"); </스크립트>

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

function fixContext(ctx) { // * upgrade Firefox 3.0.x text rendering to HTML 5 standard if (!ctx.fillText && ctx.mozDrawText) { ctx.fillText = function(textToDraw, x, y, maxWidth) { ctx.translate(x, y); ctx.mozTextStyle = ctx.font; ctx.mozDrawText(textToDraw); ctx.translate(-x, -y); }; } // * Setup measureText if (!ctx.measureText && ctx.mozMeasureText) { ctx.measureText = function(text) { if (ctx.font) ctx.mozTextStyle = ctx.font; var width = ctx.mozMeasureText(text); return { width: width }; }; } // * Setup html5MeasureText if (ctx.measureText && !ctx.html5MeasureText) { ctx.html5MeasureText = ctx.measureText; ctx.measureText = function(text) { var textMetrics = ctx.html5MeasureText(text); // fake it 'til you make it textMetrics.ascent = ctx.html5MeasureText("m").width; return textMetrics; }; } // * for other browsers, no-op away if (!ctx.fillText) { ctx.fillText = function() {}; } if (!ctx.measureText) { ctx.measureText = function() { return 10; }; } return ctx; }
提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> (function() { var canvas = document.getElementById("screen"); var ctx = fixContext(canvas.getContext("2d")); ctx.font = "20pt Arial"; ctx.fillText("Hello, Canvas!", 20, 20); ctx.fillText("www.xujiwei.com", 20, 50); function fixContext(ctx) { // * upgrade Firefox 3.0.x text rendering to HTML 5 standard if (!ctx.fillText && ctx.mozDrawText) { ctx.fillText = function(textToDraw, x, y, maxWidth) { ctx.translate(x, y); ctx.mozTextStyle = ctx.font; ctx.mozDrawText(textToDraw); ctx.translate(-x, -y); }; } // * Setup measureText if (!ctx.measureText && ctx.mozMeasureText) { ctx.measureText = function(text) { if (ctx.font) ctx.mozTextStyle = ctx.font; var width = ctx.mozMeasureText(text); return { width: width }; }; } // * Setup html5MeasureText if (ctx.measureText && !ctx.html5MeasureText) { ctx.html5MeasureText = ctx.measureText; ctx.measureText = function(text) { var textMetrics = ctx.html5MeasureText(text); // fake it 'til you make it textMetrics.ascent = ctx.html5MeasureText("m").width; return textMetrics; }; } // * for other browsers, no-op away if (!ctx.fillText) { ctx.fillText = function() {}; } if (!ctx.measureText) { ctx.measureText = function() { return 10; }; } return ctx; } })(); </script>
提示：您可以先修改部分代码再运行

예제를 실행하면 Canvas 개체가 있는 영역에 "Hello, World!"가 표시됩니다. 이것이 바로 코드에서 ctx.fillText("Hello, World!", 20, 20)가 수행하는 작업입니다.

fillText 및 관련 속성

fillText 메소드는 Canvas에 텍스트를 표시하는 데 사용됩니다. 이 메소드는 4개의 매개변수를 사용할 수 있으며 그 중 마지막 매개변수는 선택사항입니다.

void fillText(DOMString 텍스트, float x, float y, [선택 사항] float maxWidth);

여기서 maxWidth는 텍스트를 표시할 때 최대 너비를 나타내며, 이는 텍스트 오버플로를 방지할 수 있습니다. 그러나 테스트에서 Firefox 및 Chomre에서 maxWidth를 지정해도 아무런 효과가 없는 것으로 나타났습니다.

fillText 메소드를 사용하기 전에 Context의 글꼴 속성을 설정하여 표시되는 텍스트의 글꼴을 조정할 수 있습니다. 위의 예에서는 표시되는 텍스트의 글꼴로 "20pt Arial"을 다르게 설정할 수 있습니다. 구체적인 효과를 직접 살펴보세요.

종료

그럼 일단 사양을 읽어보며 이 시리즈를 작성하겠습니다 :)

참고자료

1. 스크립팅 언어의 새로운 무대, HTML5 Canvas, hred

2. 캔버스 요소 WHATWG

3. 캔버스 중국어, Mozilla

4. 캔버스 튜토리얼 영어, Mozilla

5. 오페라, 오페라에서 캔버스 지원