주석 : HTML5는 많은 모양을 그릴 수 있습니다. 다음은 사각형을 그리는 코드입니다. 참조하십시오.
<! doctype html> <head>
<meta charset = utf-8>
<title> html5 드로우 사각형 </title>
<script src = "<a href ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</head>
<cript>
$ (document) .ready (function () {
var c = document.getElementById ( "drawbox");
var draw = c.getContext ( "2d"); // 2D 컨텐츠에 대한 참조를 얻고 도면 API에 전화하십시오.
draw.fillstyle = "#ff0000"; // 메소드 1은 채우기 색상을 지정합니다
draw.fillRect (0,0,300,100); // 좌표 및 길이 및 너비
draw.fillstyle = "RGBA (0,0,255,0.5)"; // 방법 2 RGB+투명성
draw.fillRect (400,0,100,100); // 좌표 및 길이 및 너비
})
</스크립트>
</body>
<canvas> </canvas>
</body>
</html>
복제 다이어그램