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('Canvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
위 내용은 html5의