예제 11-5. 사각형 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 15:19 |* stroke()는 경로에 담긴 도형(직선, 원호, 곡선)을 직선 연결하여 그린다
- stroke()는 직선, 원호, 곡선을 그릴 때 경로 안에 만들어진 순서대로 도형들을 연결하여 그린다.
- 경로 안에 도형이 떨어져 있을 때도 도형을 연결하는 직선을 추가하여 그린다.
* 사각형 그리기
rect(x, y, w, h) // (x, y)에서 w x h 크기의 사각형을 경로에 삽입한다.
strokeRect(x, y, w, h) // (x, y)에서 w x h 크기의 사각형을 경로에 삽입하지 않고 캔버스에 직접 그린다
rect() 메소드는 사각형을 경로에 추가한다.
context.rect(10, 10, 100, 100); // (10,10)에서 100 X 100 크기의 사각형을 경로에 추가
context.stroke(); // 캔버스에 원호를 그린다
이와 달리 strokeRect() 메소드를 이용하면 사각형을 경로에 삽입하지 않고 캔버스에 바로 그릴 수 있다.
context.strokeRect(10, 10, 100, 100); // (10,10)에서 100 X 100 크기의 사각형 그리기
(strokeRect에서 R을 대문자로 써야 실행된다)
예제 11-5. 사각형 그리기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>사각형 그리기 예</title></head> <body> <h3>사각형 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="200" height="150"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // // 2차원 그래픽에 사용되는 프로퍼티와 메소드를 가진 컨텍스트 객체 context.beginPath(); // 빈 경로 구성 for(var i=0; i<5; i++) { context.rect(10+i*30,10+i*10, 50,50); } context.strokeStyle="magenta"; // 선의 색 context.stroke(); // 사각형을 캔버스에 그린다 </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-8. 텍스트 그리기 (0) | 2017.11.03 |
|---|---|
| 예제 11-6. 선의 색과 굵기. 예제 11-7. 칠하기 (0) | 2017.11.03 |
| 예제 11-4. 원호 그리기 (0) | 2017.11.03 |
| 예제 11-3. 선으로 삼각형 그리기 (0) | 2017.11.03 |
| 예제 11-2. 캔버스 그리기 맛보기 (0) | 2017.11.03 |