● 선그리기
<!-- 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);
