[자바스크립트] canvas 를 이용한 그리기

● 선그리기

<!-- canvas  선언 ( 크기를 미리 정해야 한다 ) -->

<canvas id ="sample" width=500 height=500 ></canvas>

 

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

 

//canvas의 context 받기
var context = canvas.getContext("2d");    

 

context.beginPath();        //시작 및 초기화

context.moveTo(100, 0);    //시작지점

context.lineTo(100, 200);    //시작지점에서 그리기

 

context.strokeStyle = "black";    // 선색 변경

context.lineWidth = 0.5;             // 선 두깨 설정

 

context.stroke();    // 선그리기

</script>

 

● 사각형 그리기

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

 

//canvas의 context 받기
var context = canvas.getContext("2d");    

context.rect(50,50,100,100);       // 설정  ( 50,50기준으로 가로 100세로 100 )

context.strokeStyle = "black";    // 선색 변경

context.lineWidth = 0.5;             // 선 두깨 설정

context.stroke();                     //선그리기

</script>

 

● 면 그리기

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

 

//canvas의 context 받기
var context = canvas.getContext("2d");    

 

context.fillStyle = "green";    // 면색 변경 

context.fillRect(150, 150, 50, 50);    // 채워서 그리기 ( 150,150 기준으로 가로 50 세로 50 )

</script>

 

● 원 그리기

context.beginPath();

// 100, 100 에 반지름 50 인 0*Math.PI 시작으로 2*Math.PI 로 끝나는 원

context.arc(100, 100, 50, 0*Math.PI, 2*Math.PI, false);    

 

//다 못그릴 경우 선으로 메운다. ex )  0*Math.PI 에서 1.5*Math.PI 일경우 1/4 은 안그리게 된다 이걸 선으로 마무리

context.closePath();

 

context.strokeStyle = "blue";
context.stroke();

 

● 3차 곡선 그리기 ( 하트 )

context.beginPath();
context.moveTo(100,150); //시작점

context.bezierCurveTo( 0, 50, 100, 50, 100, 70); //3개의 Point
context.moveTo(100,150); //시작점
context.bezierCurveTo( 200, 50, 100, 50, 100, 70); //3개의 Point
context.strokeStyle = "green"; //선색

context.stroke();

 

● 캔버스 초기화

var canvas  = document.getElementById("canavas");
var ctx   = canvas.getContext("2d");
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);