캔버스 요소는 웹페이지에 그래픽을 그리는 데 사용됩니다.
캔버스란?
HTML 5의 캔버스 요소는 JavaScript를 사용하여 웹페이지에 이미지를 그립니다.
캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다.
캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.
캔버스 요소 만들기
HTML 5 페이지에 캔버스 요소 추가, 요소의 ID, 너비 및 높이 지정:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript를 통해 그리기
canvas 요소 자체에는 그리기 기능이 없습니다. 모든 그리기 작업은 JavaScript 내에서 수행되어야 합니다.
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
JavaScript는 ID를 사용하여 캔버스 요소를 찾습니다.
var c=document.getElementById("myCanvas");
그런 다음 컨텍스트 개체를 만듭니다.
var cxt=c.getContext("2d");
getContext("2d") 개체는 경로, 직사각형, 원, 문자 그리기 및 이미지 추가를 위한 여러 메서드가 포함된 내장 HTML 5 개체입니다.
예: 사각형 위에 마우스를 올리면 좌표를 직접 확인할 수 있습니다.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { margin: 0px; font-size: 70%; font-family: verdana, helvetica, arial, sans-serif; } #coordiv { float: left; width: 199px; height: 99px; border: 1px solid #c3c3c3 } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body> <p>把鼠标悬停在下面的矩形上可以看到坐标:</p> <div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <div id="xycoordinates"></div> </body> </html>
위 코드는 다음과 같습니다. HTML5 의 Canvas 요소 내용, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!