wulin.com의 기사 소개 (www.vevb.com) : HTML5-CANVAS 태그 드로잉 사각형.
<! doctype html>
<html>
<헤드>
<meta charset = 'utf-8'>
<title> html5-canvas 태그-드로우 사각형 </title>
</head>
<body>
<캔버스 ID = 1 너비 = 200 높이 = 200> </canvas>
<스크립트 유형 = 텍스트/JavaScript>
Window.onload = function () {
var canva = document.getElementById ( '1')
var content = canva.getContext ( '2d')
content.fillstyle = #ccc; // 캔버스의 배경색을 채우십시오
content.fillRect (0, 0, 200, 200); // 매개 변수는 각각 x 축, y 축, 너비 및 높이를 나타냅니다.
content.linewidth = 4; // 테두리 너비
content.strokestyle = #fff; // 테두리 색상
Content.Strokerect (50,50,100,100); // 테두리 좌표 및 크기
content.fillstyle = #f00; // 사각형 채우기 색상
content.fillRect (50,50,100,100); // 사각형 좌표 및 크기
}
</스크립트>
</body>
</html>