의견 : 캔버스 <canvas>는 html5에 정의 된 새로운 HTML 요소입니다. 이 요소는 일반적으로 HTML 페이지에서 JavaScript를 통해 그래픽을 그리는 데 사용될 수 있으며 일부 애니메이션을 만드는 데 사용될 수도 있습니다. 물론 현재 HTML5
캔버스는 무엇입니까?
<canvas>는 HTML5에서 정의 된 새로운 HTML 요소입니다. 이 요소는 일반적으로 HTML 페이지에서 JavaScript를 통해 그래픽을 그리는 데 사용될 수 있으며 일부 애니메이션을 만드는 데 사용될 수도 있습니다. 물론, HTML5 사양은 여전히 초안 단계에 있으며 2010 년까지 공식적으로 출시되기까지 소요될 수 있지만 현재 많은 브라우저가 이미 일부 HTML5 사양을 지원했습니다. 현재 캔버스 요소를 지원하는 브라우저에는 Firefox3+, Safari4, Chrome 2.0+ 등이 포함되어 있으므로이 페이지에서 예제를 실행할 때 위의 브라우저 중 하나를 사용하고 있는지 확인하십시오.
Mozilla의 Canvas에 대한 많은 튜토리얼이 있었지만 학습 과정을 기록하기로 결정했습니다. 내가 충분히 이해하지 못한다고 생각되면 참조 자료의 Mozilla 웹 사이트의 Canvas 튜토리얼 링크를 찾을 수 있습니다.
또한 몇 가지 흥미로운 캔버스 예제는 여기에서 찾을 수 있습니다.
캔버스로 시작하십시오
캔버스를 사용하는 것은 간단합니다. 다른 HTML 요소를 사용하는 것과 마찬가지로 페이지에 <canvas> 태그를 추가하면됩니다.
<canvas> </canvas>
물론 이것은 캔버스 객체의 간단한 생성 일 뿐이며 그에 대한 작업을 수행하지 않습니다. 현재 캔버스 요소는 DIV 요소와 다르게 보이지 않으며 페이지에서 아무것도 볼 수 없습니다 :)
또한 캔버스 요소의 크기는 너비 및 높이 속성으로 지정 될 수 있으며, 이는 IMG 요소와 다소 유사합니다.
캔버스의 핵심 : 컨텍스트
앞에서 언급했듯이 JavaScript를 통해 캔버스 객체를 작동하여 그래픽, 합성 이미지 등을 그릴 수 있습니다. 이러한 작업은 Canvas 객체 자체를 통해 수행되지 않지만 캔버스 오브젝트의 방법을 통해 캔버스 작동 컨텍스트를 얻습니다. 다시 말해, 캔버스 객체를 사용하는 과정에서 캔버스 객체의 컨텍스트를 처리하고 캔버스 객체 자체를 사용하여 캔버스 객체의 크기와 같은 정보를 얻을 수 있습니다.
캔버스 객체의 컨텍스트를 얻는 것은 매우 간단합니다. 캔버스 요소의 getContext 메소드를 호출하십시오. 호출 할 때는 컨텍스트 유형 매개 변수를 전달해야합니다. 사용할 수 있고 사용할 수있는 유일한 유형 값은 2D입니다.
Firefox3.0.x의 당황
Firefox3.0.x는 캔버스 요소를 지원하지만 사양에 따라 완전히 구현되지는 않습니다. 사양의 FillText 및 MeasureText 메소드는 Firefox3.0.x의 몇 가지 Firefox 별 방법으로 대체됩니다. 따라서 Firefox3.0.x에서 캔버스를 사용할 때는 먼저 다른 브라우저에서 이러한 방법의 차이점을 해결해야합니다.
다음 코드는 Mozillabespin 프로젝트에서 가져온 것으로 Firefox3.0.x의 캔버스의 컨텍스트 객체와 HTML5 사양 사이의 불일치를 수정합니다.
참고 : Opera 9.5까지 Opera는 HTML5 사양의 캔버스 객체의 충전 텍스트 및 관련 메소드 및 속성을 지원하지 않습니다.
안녕하세요, 캔버스!
캔버스에 대한 예비 이해 후, 우리는 유명한 Helloworld Hello, Canvas의 또 다른 지점 인 첫 번째 Canvas 프로그램을 작성하기 시작했습니다.
캔버스 개체가 위치한 영역을 실행하면 Ctx.fillText (Hello, World!, 20,20)의 기능인 Hello, World!를 보여줍니다. 코드에서.
FillText 및 관련 속성
FillText 메소드는 캔버스에 텍스트를 표시하는 데 사용됩니다. 4 개의 매개 변수를 허용 할 수 있으며 마지막 매개 변수는 선택 사항입니다.
voidfillText (IndomStringText, infloatx, infloaty, [선택 사항] infloatmaxwidth);
여기서 MaxWidth는 텍스트를 표시 할 때 최대 너비를 나타내며 텍스트가 넘치지 않도록 할 수 있습니다. 그러나 테스트에서 Firefox 및 Chomre에서 MaxWidth를 지정할 때 MaxWidth가 효과적이지 않다는 것을 알았습니다.
FillText 메소드를 사용하기 전에 컨텍스트의 글꼴 속성을 설정하여 텍스트 글꼴을 조정할 수 있습니다. 위의 예에서는 20ptarial을 텍스트의 글꼴로 사용했습니다. 특정 효과를보기 위해 다른 값을 직접 설정할 수 있습니다.
마치다
그게 다야. 사양을 읽는 동안이 시리즈를 작성하겠습니다 :)
참조
1. HTML5 캔버스, 스크립팅 언어를위한 새로운 단계, HRED
2.
3. Canvastutorial Chinese, Mozilla
4. 캔버스테리어 영어, 모질라
5. Canvassupportinopera, 오페라