태그 <canvas>의 HTML5

새로운 태그 태그 <canvas>의 HTML5는 그리기 및 그래픽 작업하는 데 사용할 수있는 이전 버전에 존재하지 않습니다.

태그 <canvas>이 제대로 작동하고 완전히 그것의 잠재력을 수행하기 위해 자바 스크립트 같은 스크립트 언어 지원을해야합니다.

이 문서의 목적은 새로운 태그의 기본 사용을 설명하는 것입니다하지만, 실용적인 예제의 상수를 사용하여 고급 몇 가지 포인트, 나는 희망, 학습 촉진합니다.

전제

최고의 캔버스에 절대적인 참신은 모든 브라우저에서 지원하지 않습니다, 그렇게이 문서의 데모 예제가 올바르게 표시되지 않을 수 있습니다.
시험은 어떤 문제를 경험하지 않은 구글 크롬과 함께 진행되었습니다.

태그 <canvas>를 사용하여

캔버스 태그의 일반적인 사용은 매우 간단하고 다른 HTML 태그로부터 다릅니다.
공식적으로 캔버스는 간단한 컨테이​​너이며, 같은 여는 태그 (<canvas>)와 닫는 (</ 캔버스>)이 있습니다 :

 <canvas id="esempio" width="196" height="96">

 





 요소 지원되지 않습니다







 </ 캔버스>

치수가 명시적으로 표시되지 않은 경우 (속성의 너비와 높이를 사용) 컨테이너에 지정된 크기는 기본적으로 높이 300 150 기본 사각형입니다.
ID 속성은 물론, 내 의견에 항상 페이지에 사용되는 각 개체에 대한 고유한 참조를 가지고 호출하는 것이 좋습니다, 필수는 아니지만.

그래픽이 브라우저에서 지원하지 않을 경우주의를 대표 <canvas>와 </ 캔버스>하여 텍스트 부분 구분된 나타냅니다.

구현 세부 사항 시작하기 전에 라이브 테스트하는 간단한 코드가 캔버스의 가능성을 시험 :

 <canvas id="bandierina" width="180"> 높이 = "100"> </ 캔버스 지원되지 않음>







 <script type="text/javascript">







 var에 캔버스 = document.getElementById ( '깃발');







 var에 C = canvas.getContext ('2 D ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ SCRIPT>

에 이 페이지를 이 코드를 (당신이 다시 한번, HTML 5를 지원하는 브라우저가 있어야 제대로 출력을 볼 수)의 결과를 볼 수 있습니다.

마찬가지로 이미 코드의이 섹션의 문서의 시작 부분에 발표하는 것은 캔버스 작업은 스크립트를 사용하여 해당 명시적인 사실이다. 이 예제에서 우리는 즉시 개체 캔버스 배경 변수를 추출하는 표준 기술을 참고하실 수 있습니다

 / / ID로 캔버스 항목 만들기







 var에 캔버스 = document.getElementById ( '깃발');









 / / 캔버스에 새로운 2 차원 개체를 만듭니다







 var에 C = canvas.getContext ('2 D ');

자바 스크립트 getElementById 메서드는 ID 필드의 값을 통해 변수 캔버스에 개체를 저장, getContext는 ('2 D ') 문맥, 또는 프로그래머에게 같은 캔버스 작업하는 방법을 제공하는 개체 소요 (당신은 2 차원 그래픽 기능, 즉 2 차원과 함께 일하고 싶어 우리의 경우) 원하는.

다음 페이지에서 우리는 프로그래머에게 유용한 몇 가지 기본적인 작업은 캔버스의 활용 계획 나열됩니다.

• <<
• 1
• 2
• 3
• 4
• 5
• >>