다양한 드로잉 방법
링크: Drawing shapes with canvas
링크: codepen
<html>
<head>
<meta charset="utf-8"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas><br/>
<canvas id="canvas2"></canvas><br/>
<canvas id="canvas3"></canvas><br/>
<canvas id="canvas4"></canvas><br/>
<canvas id="canvas5"></canvas><br/>
<canvas id="canvas6"></canvas><br/>
</body>
</html>//script
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)'; //스타일 지정
ctx.fillRect(10, 10, 50, 50); //채워진 사각형 그리기 x,y,width,height
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
//직사각형 그리기
var canvas2 = document.getElementById('canvas2');
if(canvas2.getContext){
var ctx = canvas2.getContext('2d');
ctx.fillRect(25, 25, 100, 100); //채워진 도형 그리기 x,y,width,height
ctx.clearRect(45, 45, 60, 60); //사각형 투명하게 그리기
ctx.strokeRect(50, 50, 50, 50); //사각형 윤곽 그리기
}
//canvas, canvas2는 캔버스에 직접 그렸다.
/*
그리기 경로
경로는 다양한 모양, 곡선 여부, 너비 및 색상이 다를 수 있는 선 세그먼트로 연결된 점의 목록입니다.
경로 또는 하위 경로를 닫을 수 있습니다.
경로를 사용하여 모양을 만들기 위해 몇 가지 추가 단계를 수행합니다.
1.bgeinPath()새 경로 생성
2.그리기 명령 을 사용하여 경로를 그립니다.
- moveTo() 시작점 설정, lineTo()시작점에서 다음 좌표로 선 생성
- stroke()윤곽선 그리기, fill()경로의 영역을 채우기
- closePath()현재위치에서 시작점으로 직선 생성,
3.패스가 생성되면 패스를 획 또는 칠하여 렌더링할 수 있습니다.
* 현재 경로가 비어있으면 첫번째 경로 생성은 항상 moveTo()로 처리된다.
이런 이유로 경로를 재설정한 후 구체적인 경로설정을 해야한다.
*/
var canvas3 = document.getElementById('canvas3');
if(canvas3.getContext){
var ctx = canvas3.getContext('2d');
ctx.beginPath(); //새 경로 생성
ctx.moveTo(75,50); //x75, y50 9시방향 꼭지점으로 이동
ctx.lineTo(100,75);//moveTo에서 캔버스x100, y75 6시방향 꼭지점으로 선을 그린다.
ctx.lineTo(100,25);//x100, y25 12시방향 꼭지점
ctx.fill(); //fill해야 그림이 생성된다.
//* canvas 경로 밖의 좌표를 찍으면 도형이 보이지 않는다.
}
var canvas4 = document.getElementById('canvas4')
if(canvas4.getContext){
var ctx = canvas4.getContext('2d');
ctx.beginPath();
// arc(x, y, radius반지름, startAngle, endAngle, counterclockwise시계반대방향)
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
//arcTo(x1, y1, x2, y2, radius)
}
var canvas5 = document.getElementById('canvas5')
if(canvas5.getContext){
var ctx = canvas5.getContext('2d');
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath()//없으면 삼각형 한 변이 비어있게 된다.
ctx.stroke();
}
}