본문 바로가기

개발일지/JavaScript + jquery

[js] canvas에 그림 그리기(선, 사각형, 삼각형, 글씨 등)

~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 글씨 시작점의 좌표