html5의 <canvas> 태그의 구체적인 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

html5의

黄舟

풀어 주다： 2017-06-20 13:54:49

원래의

1711명이 탐색했습니다.

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의