html5의 태그의 구체적인 사용법에 대한 자세한 설명

5ba626b379994d53f7acf72a64f9b697 요소는 클라이언트측 벡터 그래픽 모양을 위해 디자인되었습니다. 자체 동작은 없지만 스크립트가 캔버스에 그리고 싶은 것은 무엇이든 그릴 수 있도록 그리기 API를 클라이언트 JavaScript에 노출합니다.

canvas는 HTML5에서 새로 정의된 태그입니다. 이름에서 알 수 있듯이 캔버스 태그 자체이며 자체 동작이 없으며 그래픽을 그리는 데 스크립트를 사용해야 합니다. 다음은 그 사용법 예입니다.

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

위의 코드에서 볼 수 있듯이 캔버스 태그에는 id, width, height 3가지 속성이 있는데, 그 중 id 값은 자바스크립트 코드에서 사용하기 위해 정의되어 있습니다. 캔버스 태그를 참조하려면 캔버스를 페인팅을 위한 인터페이스로 사용하세요. 너비와 높이는 각각 캔버스의 너비와 높이를 정의합니다. 기본 단위는 픽셀입니다. 숫자 뒤에는 px 단위를 추가할 수 없습니다.

캔버스 태그는 모든 브라우저에서 지원되지 않으므로 캔버스의 시작 태그와 끝 태그 사이에 텍스트를 삽입해야 합니다. 브라우저가 캔버스 태그를 지원하지 않으면 이 텍스트가 캔버스 위치에 표시됩니다. 캔버스 태그를 사용하여 독자에게 캔버스 태그를 이 브라우저에 적용할 수 없음을 상기시킵니다. JavaScript에서는 브라우저가 다음 태그를 지원하는지 여부도 확인해야 합니다.

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

캔버스 요소를 사용하여 빨간색 직사각형을 표시할 수 있습니다.

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

위 예에서와 같이 그리기 API는 캔버스 요소 자체에 정의되지 않습니다. 그러나 캔버스의 getContext() 메소드에서 얻은 그리기 환경 객체를 통해 정의됩니다. 캔버스 API는 경로 표현도 사용합니다. 그러나 경로는 문자와 숫자의

문자열으로 설명되지 않고, BeginPath() 및 arc() 메서드 호출과 같은 일련의 메서드 호출로 정의됩니다. 경로가 정의되면 fill()과 같은 다른 메서드가 이 경로에서 작동합니다.

위 내용은 html5의 태그의 구체적인 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!