html5 canvas-1.canvas 소개(hello canvas)_html5 튜토리얼 기술

오늘부터 html5 캔버스에 관한 일련의 강좌를 시작하겠습니다. 이 시리즈는 "HTML5 Canvas: Native Interactivity and Animation for the Web"을 읽고 나서 요약한 것입니다. 관심 있는 친구들은 영어 원문을 다운로드하여 읽어도 됩니다. 이 책은 캔버스 게임 개발 방법을 소개하여 캔버스의 강력한 기능을 보여줍니다. 이 책을 읽으면서 캔버스에 대해 많은 것을 배웠다고 생각합니다. 사실 캔버스 자체에는 API가 많지 않습니다. 유연하게 배우고 사용하는 것이 핵심이며, API 조합을 사용하여 놀라운 효과를 만드는 방법을 배우는 것입니다. 이 책은 캔버스 학습을 위한 최선의 선택입니다. 아쉽게도 아직 중국어 버전이 없습니다. 영어를 잘 못하는 친구들은 기다려야 할 것입니다.

우리 모두 알고 있듯이 현재 모든 브라우저가 html5를 지원하는 것은 아닙니다. html5를 지원하는 브라우저라도 html5의 모든 새로운 기능을 지원하지 않을 수 있습니다. 따라서 디버깅 환경으로 비교적 새로운 브라우저를 선택해야 합니다. Firefox(개발자가 선호하는) 또는 Chrome 브라우저를 사용하는 것이 좋습니다. 모든 예제는 Firefox를 기반으로 개발되었습니다.

여기에서는 html5와 관련된 기본 지식을 소개하지 않습니다. 인터넷에 html5에 대한 튜토리얼이 많이 있으므로 직접 배워보세요. HTML5를 배우려면 모든 사람이 JavaScript에 대한 탄탄한 기초를 갖추어야 합니다. Tom 삼촌의 블로그(http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html)로 이동하여 배울 수 있습니다. 사실 그의 일련의 강좌는 꽤 어렵습니다. 50개 정도의 장을 모두 배우면 js 전문가로 간주되어야 합니다.
이제 공식적으로 캔버스 강좌를 시작합니다. 첫 번째 예인 "hello canvas"입니다.
먼저 다음과 같이 본문에 캔버스 태그를 추가해야 합니다:

코드 복사

코드는 다음과 같습니다.

귀하의 브라우저는 HTML5 Canvas를 지원하지 않습니다.

브라우저가 캔버스 개체를 지원하지 않는 경우 캔버스의 텍스트 부분이 표시됩니다.
은 캔버스 태그를 정의하며, js를 통해 이를 작동해야 할 경우 getElementById를 통해 수행할 수 있습니다.
var theCanvas = document.getElementById("canvasOne"); 이제 jquery를 사용하여 작업을 개발하는 데 익숙해졌습니다. 그러면 jquery를 사용하여 캔버스 객체를 얻는 방법은 무엇입니까?
var canvas = $('#canvasOne').get(0); 또는 var canvas = $('#canvasOne')[0]; 0]이 없습니다. get() 메서드나 [] 첨자를 사용하지 않으면 js 코드가 캔버스를 정상적으로 작동할 수 없습니다. $('#canvasOne')은 jquery 객체를 얻고 실제로 작동하려는 것은 html dom 객체이기 때문입니다. jquery 객체를 dom 객체로 변환하는 데 문제가 있습니다. 이 변환은 get() 또는 첨자를 통해 완료됩니다. dom 객체를 jquery 객체로 변환해야 하는 경우 $() 메서드를 사용할 수 있습니다. 모르시는 분들은 바이두에만 직접 가실 수 있으니 여기서는 자세히 설명하지 않겠습니다.
코드의 견고성을 위해 브라우저가 캔버스 개체를 지원하는지 확인해야 하며, 이는 다음 코드를 통해 달성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

if (!theCanvas || !theCanvas.getContext) {
return;
}

그러나 이 작업을 완료하려면 modernizr.js 라이브러리를 사용하는 것이 좋습니다.

코드 복사

코드는 다음과 같습니다.

function canvasSupport () {
return Modernizr.canvas;
}

캔버스는 다음 코드를 통해 달성되는 2D 렌더링을 지원합니다.
var context = theCanvas.getContext("2d");
이제 컨텍스트 객체를 통해 캔버스에 이미지를 그릴 수 있습니다.

코드 복사

코드는 다음과 같습니다.

//영역 색상 설정
context .fillStyle = "#ffffaa";
//그리기 영역
context.fillRect(0, 0, 500, 300)
//글꼴 설정
context.font = " 20px _sans";
//세로 정렬 설정
context.textBaseline = "top";
//텍스트 그리기
context.fillText ("Hello World!", 195, 80);
// 테두리 색상 설정
context.StrokeStyle = "#000000";
//테두리 그리기
context.strokRect(5, 5, 490, 290)

그림 그리는 방법을 소개합니다. 이미지의 비동기 다운로드로 인해 캔버스를 사용하여 이미지를 그릴 때 이미지가 다운로드되었는지 확인하기 위해 다음 방법을 사용합니다:

코드 복사

코드는 다음과 같습니다.

var helloWorldImage = new Image()
helloWorldImage.src = "helloworld.gif"; 🎜>helloWorldImage.onload = function ( ) {
context.drawImage(helloWorldImage, 160, 130);
}

사진이 끝나면 onload 이벤트가 트리거됩니다. 그리고 컨텍스트 객체는 그림을 그리는 데 사용됩니다.
전체 코드를 보려면 데모를 다운로드하세요. 데모 다운로드 주소는
html5canvas.helloworld.zip입니다.