~javaScript 기능들 맛보기~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="mycanvas" width="500" height="300"
style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.beginPath();
obj.moveTo(20,30); //그 위치로 이동
obj.lineTo(150,70); //선을 긋는다.
obj.lineTo(220,10);
obj.lineTo(300,120);
obj.lineWidth=3; obj.strokeStyle="red"; obj.lineCap="round";
obj.stroke(); //선을 긋는 명령
</script>
</body>
</html>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.beginPath();
obj.moveTo(50,150);
obj.lineWidth = 3;
obj.quadraticCurveTo(150, 50, 200, 250); //곡선
obj.stroke();
</script>
obj.moveTo(50,150);
50,150 시작위치
obj.quadraticCurveTo(150, 50, 200, 250);
150, 50의 위치에서 끌어당김
200, 250 끝위치
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.beginPath();
obj.moveTo(20,20);
obj.lineWidth = 3;
obj.bezierCurveTo(20, 100, 200, 200, 20);
obj.stroke();
</script>
20, 100 시작점
200, 100 내려가는 원부분
200, 20 끝점
직사각형
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.fillStyle = "blue" //fill 칠해라
obj.fillRect(0, 0, 150, 75); //Rect 사각형
</script>
obj.fillRect(0, 0, 150, 75);
0, 0 왼쪽 위 모서리
150, 75 오른쪽 아래 모서리
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.fillStyle = "yellow" //fill 칠해라
obj.fillRect(150, 75, 300, 150); //Rect 사각형
</script>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.moveTo(10, 10);
obj.lineTo(150, 50);
obj.lineTo(10, 50);
obj.lineWidth = 5;
obj.strokeStyle = "red";
obj.stroke();
</script>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.moveTo(50, 10); //패스 시작
obj.lineTo(20, 100); //x,y 좌표이동
obj.lineTo(80, 100); //x,y 좌표로 선그리기
obj.closePath(); //패스종료
obj.fillStyle = "red";
obj.fill(); //칠해
</script>
obj.fill(); //칠해
obj.stroke(); //선
둘이 바꿔주면
이런 모양이 된다
둘 다 한 번에 사용하면 선과 색 함께 칠할 수 있음
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.beginPath(); //패스 시작
obj.arc(100,75,50,0,2*Math.PI,true); //x, y 좌표로 이동
obj.fillStyle = "blue";
obj.fill();
obj.lineWidth = 3;
obj.strokeStyle = "red";
obj.stroke(); //칠해
</script>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.fillStyle="blue";
obj.font = "italic bold 40px sans-serif";
obj.textBaseline = "bottom";
obj.fillText("안녕하세요", 50, 100);
</script>
obj.fillText("안녕하세요", 50, 100);
50, 100 글씨 시작점의 좌표
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [jquery] 명령어 기본규칙과 예시들① (0) | 2021.09.10 |
|---|---|
| [jquery] 다운로드 주의 사항 + 기본 사용법 (0) | 2021.09.10 |
| [js] 새 창 열기 & 연 창을 닫기 & 새 창에서 인쇄 (window 객체 사용) (0) | 2021.09.09 |
| [js] 타이머 setTimeout (0) | 2021.09.09 |
| [js] 현재 날짜와 시간을 찍는 메소드 (0) | 2021.09.09 |
