의견 : 모든 브라우저가 현재 HTML5를 지원하는 것은 아니라는 것을 모두 알고 있습니다. HTML5를 지원하는 브라우저조차도 HTML5의 모든 새로운 기능을 지원하지 않을 수 있습니다. Firefox (개발자가 좋아하는) 또는 Chrome 브라우저를 사용하는 것이 좋습니다. 내 모든 예는 Firefox를 기반으로 개발되었습니다.
오늘부터 우리는 HTML5 캔버스에 대한 일련의 과정을 시작할 것입니다. 이 시리즈는 "HTML5 캔버스 : 웹의 네이티브 상호 작용 및 애니메이션"을 읽은 후 요약입니다. 관심있는 친구들은 독창적 인 영어 책을 다운로드 할 수 있습니다. 이 책은 캔버스의 발전을 도입하여 캔버스의 강력한 기능을 보여줍니다. 나는 그것이 꽤 좋다고 생각합니다. 나는이 책을 읽음으로써 캔버스에 대한 많은 지식을 배웠다. 실제로 캔버스 자체에는 API가 많지 않습니다. 열쇠는 적극적으로 배우고 사용하고 API의 조합에 대한 놀라운 결과를 만드는 법을 배우는 것입니다. 그리고이 책은 캔버스 학습을위한 최선의 선택입니다. 아직 중국어 버전이없는 것은 유감입니다. 영어 가난한 영어를 가진 친구는 기다릴 수 있습니다.우리 모두가 알고 있듯이 모든 브라우저가 현재 HTML5를 지원하는 것은 아니며 HTML5를 지원하는 브라우저조차도 HTML5의 모든 새로운 기능을 반드시 지원하지는 않습니다. 따라서 모든 사람은 디버깅 환경으로 비교적 새로운 브라우저를 선택해야합니다. Firefox (개발자가 가장 좋아하는) 또는 Chrome 브라우저를 사용하는 것이 좋습니다. 내 모든 예는 Firefox를 기반으로 개발되었습니다.
여기에서 HTML5와 관련된 기본 지식을 소개하지 않습니다. 인터넷에는 HTML5에 대한 많은 튜토리얼이 있으므로 직접 배울 수 있습니다. HTML5를 배우려면 자바 스크립트로 더 나은 기초가 있어야합니다. 당신은 톰 삼촌의 블로그로 가서 배울 수 있습니다. 사실,이 일련의 코스는 매우 어렵습니다. 50 개 이상의 기사를 공부하면 JS 전문가로 간주되어야합니다.
이제 우리는 공식적으로 캔버스 코스, 첫 번째 예입니다 : Hello Canvas.
먼저 다음과 같이 본문에 캔버스 태그를 추가해야합니다.
<canvas>
브라우저는 HTML5 캔버스를 지원하지 않습니다.
</캔버스>
캔버스의 텍스트 부분은 브라우저가 캔버스 객체를 지원하지 않으면 표시됩니다.
캔버스 태그가 정의되어 있습니다. JS를 통해 작동 해야하는 경우 GetElementById를 통해 구현할 수 있습니다.
var thecanvas = document.getElementById (Canvasone); 우리는 이제 jQuery를 사용하여 작업을 개발하는 데 익숙해 져서 jQuery를 사용하여 캔버스 객체를 얻는 방법은 무엇입니까?
var canvas = $ ( '#canvasone'). get (0); 또는 var canvas = $ ( '#canvasone') [0]; get (0)과 [0]가 그것을 가지고 있지 않다는 것을 모르겠습니다. get () 메소드 또는 [] 첨자를 사용하지 않으면 JS 코드는 정상적으로 캔버스를 작동 할 수 없습니다. $ ( '#canvasone')는 jQuery 객체를 가져오고 실제로 작동하려는 것은 HTML DOM 객체이기 때문입니다. jQuery 객체가 DOM 객체로 변환되는 문제가 있으며이 변환은 get () 또는 첨자를 통해 완료됩니다. DOM 객체를 jQuery 객체로 변환 해야하는 경우 $ () 메소드를 사용하여 구현할 수 있습니다. 그것에 대해 명확하지 않은 내 친구는 스스로 바이두에가는 유일한 사람이 있으므로 여기서 깊이 들어 가지 않을 것입니다.
코드의 견고성을 보장하려면 브라우저가 다음 코드를 통해 구현할 수있는 캔버스 개체를 지원하는지 여부를 결정해야합니다.
if (! thecanvas ||! thecanvas.getContext) {
반품;
}
그러나 Modernizr.js 라이브러리를 사용 하여이 작업을 완료하는 것이 좋습니다. 이것은 매우 수동적 인 HTML5 JS 라이브러리이며 많은 유용한 방법을 제공합니다.
함수 canvassupport () {
Return Modernizr.canvas;
}
Canvas는 2D 렌더링을 지원하며 다음 코드를 통해 구현됩니다.
var context = thecanvas.getContext (2d);
다음으로 컨텍스트 객체를 통해 캔버스에서 이미지를 그릴 수 있습니다.
// 영역 색상을 설정합니다
Context.fillStyle = "#ffffa";
// 영역을 그립니다
context.fillRect (0, 0, 500, 300);
// 글꼴을 설정합니다
context.font = "20px _sans";
// 수직 정렬을 설정합니다
context.textBaseline = "TOP";
// 텍스트를 그립니다
context.fillText ( "Hello World!", 195, 80);
// 테두리 색상을 설정합니다
context.strokestyle = "#000000";
// 테두리를 그리십시오
Context.Strokerect (5, 5, 490, 290);
그림의 그림은 아래에 설명되어 있습니다. 이미지의 비동기 다운로드로 인해 캔버스로 사진을 그릴 때 이미지가 다운로드되었는지 확인하기 위해 다음 방법을 사용합니다.
var helloworldimage = new Image ();
helloworldimage.src = "helloworld.gif";
helloworldimage.onload = function () {
Context.DrawImage (HelloworlDimage, 160, 130);
}
이미지가 완료되면 Onload 이벤트가 트리거되고 컨텍스트 객체를 사용하여 이미지가 그려집니다.
모든 사람은 데모를 다운로드하여 전체 코드를보십시오. 데모 다운로드 주소 : html5canvas.helloworld.zip