자바스크립트로 사각형을 그리는 방법
- 藏色散人원래의
- 2021-04-08 14:57:332216검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트에서 속성을 제거하는 방법다음 기사：자바스크립트에서 속성을 제거하는 방법