반응형
- E오학기_477
- E01_캔버스
- 01_캔버스요소
- _00_canvas
- 캔버스 태그 <canvas>
- 도화지라는 뜻. 그림판
- 옵션이 있어야 한다.
- 옵션 => 가로 세로 를 넣어주는게 좋다.
- mycanvas.html
-
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><canvas id="myCanvas" width="480" height="320" style="border: 1px solid black;"></canvas><script src="mycanvas.js"></script></body></html>
- mycanvas.js
- canvas안에 getContext라는 옵션이 있다.
- ctx에다가 그림을 그릴 수 있다.
-
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
_01_line
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN
앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치,
developer.mozilla.org
캔버스 설명
- line.html
-
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas><script src="line.js"></script></body></html>
<!--참고사이트-->
- line.js
-
function myLine(ctx, x, y, x2, y2){ctx.moveTo(x, y);ctx.lineTo(x2, y2);ctx.stroke();}
function myRect(ctx, x, y, x2, y2){
ctx.moveTo(x, y);ctx.lineTo(x, y2);ctx.moveTo(x2, y);ctx.lineTo(x2, y2);
ctx.moveTo(x, y);ctx.lineTo(x2, y);
ctx.moveTo(x, y2);ctx.lineTo(x2, y2);
ctx.stroke();}
function drawLine(){/*[0] 열기ctx.beginPath();
[1] 시작점moveTo (start x , start y);[2] 끝점lineTo (end x , end y)[3] 그리기ctx.stroke();
[4] 닫기ctx.closePath();*/ctx.beginPath(); // 그리기 시작
// ctx.moveTo(100, 75); // 시작점// ctx.lineTo(300, 75); // 끝점// ctx.stroke(); // 그리기
// ctx.moveTo(300, 75); // 시작점// ctx.lineTo(300, 275); // 끝점// ctx.stroke(); // 그리기
// ctx.moveTo(20, 175); // 시작점// ctx.lineTo(45, 315); // 끝점// ctx.stroke(); // 그리기
myLine(ctx, 500, 500, 600, 600);myRect(ctx, 300, 300, 500, 500);
myRect(ctx, 100, 100, 300, 300);
ctx.closePath(); // 그리기 종료
}
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");drawLine();
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| _01_캔버스클릭원그리기 , _02_캔버스클릭원지우고원그리기 , _03_FPS셋팅 (1) | 2025.06.11 |
|---|---|
| _02_grid , _03_rect , _04_arc , _05_text (1) | 2025.06.11 |
| 02_테트리스 (1) | 2025.06.10 |
| 01_스네이크 ( 1 ~ 3 ) (1) | 2025.06.10 |
| 03_클래스버전_전체스태틱 - _01_member (2) | 2025.06.09 |