JavaScript로 사각형을 그리는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 캔버스 태그를 추가하고 JavaScript 코드를 입력하기 위한 스크립트 태그를 추가한 다음 마지막으로 그리기 메서드를 통해 사각형을 그립니다.
이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.
Javascript를 HTML에 삽입하여 직사각형을 그립니다
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas元素示例</title>
<script>
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#eeefff";
context.fillRect(0,0,400,300);
context.fillStyle = "green";
context.strokeStyle = "red";
context.lineWidth = 1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>canvas中画矩形</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
[추천 학습: javascript 고급 튜토리얼]
위 내용은 자바스크립트로 사각형을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
