HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 Canvas 직사각형 그리기 HTML5 히스토리 API

HTML5 Canvas 선 그리기와 채움

HTML에서5화면에 형태를 그리는 경우에는 두 가지 속성을 설정해야 합니다: Stroke(선 그리기)와 Fill(채움)

선 그리기와 채움 속성

HTML에서5화면에 형태를 그리는 경우에는 두 가지 속성을 설정해야 합니다：

Stroke
Fill

Stroke(선 그리기)와 Fill(채움)은 어떻게 형태를 그릴지 결정합니다. Stroke는 형태의 외곽선입니다. Fill은 형태 내부의 내용입니다.

온라인 예제

이는 파란색 테두리와 녹색 채움으로 그려진 사각형 예제입니다(실제로는 두 개의 사각형입니다)：

이 두 사각형을 그리는 코드입니다：

예제

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas 지원되지 않음
}/canvas>
<script>
//　1.페이지가 완전히 로드됨을 기다립니다。
window.onload　=　function()　{
　　　　drawExamples();
0);
function　drawExamples(){
　　　　//　2.canvas 요소에 대한 참조를 얻습니다。
　　　　var　canvas　　=　document.getElementById("ex1");
　　　//　3.canvas 요소에서 가져옵니다2D 컨텍스트.
　　　　var　context　=　canvas.getContext("2d");
　　　　//　4.그래픽을 그립니다.
　　　　context.fillStyle　=　"#0099context.fillStyle = "#00
　　　　00";10context.strokeRect(10context.strokeRect(　10,100,
　　　　context.fillRect(
　　　　context.strokeStyle = "#0000ff";　5context.lineWidth =
　　　　;10context.strokeRect(10context.strokeRect(　10,100,
0);
}/<

script>/테스트를 보세요.‹

›

Canvas not supported2주의하세요.

D 컨텍스트의 strokeStyle와 fillStyle 속성을 각각 경계 스타일과 채우기 스타일로 설정합니다.5또한, lineWidth 속성을 사용하여 파란 직사각형의 경계선 너비(곽선)를 설정하는 방법을 주의하세요. lineWidth는 다음과 같이 설정됩니다:5이는 설명된 직사각형의 선 너비가 이를 의미합니다.

.2마지막으로, 어떻게 지정하는지 주의하세요.

HTML5 Canvas 직사각형 그리기 HTML5 히스토리 API