게임/HTML 연습
CANVAS 연습2(사각형, 원)
런던전통손만두
2018. 6. 22. 23:22
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습2</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//사각형
ctx.lineWidth = 10; //선의 두께를 지정한다
ctx.strokeStyle = "red"; // 선의 색을 지정한다
ctx.fillStyle = "magenta"; //내부에 채워질 색상을 지정한다
//fillStyle = color/hex/rgba()/gradient/pattem
ctx.fillRect(20,20,200,200); //내부가 채워질 사각형을 그린다(지정)
ctx.lineJoin = "bevel"; //꼭짓점 - miter:각진 모양(기본값), round:둥근 모양, bevel: 잘려나간 모양
ctx.strokeRect(20,20,200,200); //(20,20)에서 폭과 높이가 각각 100인 선만 있는 사각형을 그린다
ctx.clearRect(40,40,100,50); // 지울 사각형을 지정한다.
//원
ctx.strokeStyle="blue";
ctx.arc(500, 300, 100, 0, Math.PI*2); //(300,300)에 반지름이 100이고 각도 360의 원을 그려라
//context.arc(x(x좌표), y(y좌표), r(반지름), sAngle(시작하는 각도), eAngle(끝나는 각도), counterclockwise(시계 방향으로 회전))
ctx.stroke();
//라운드 코너 그리기
ctx.beginPath();
ctx.moveTo(50,450);
ctx.lineTo(300,450);
ctx.arcTo(350,450,350,500,50); //직선의 끝점에서 호를 그릴 좌표를 설정한다.
//ctx.arcTo(x1(시작하는 점의 x좌표), y1(시작하는 점의 y좌표), x2(끝나는 점의 x좌표), y2(끝나는 점의 y좌표), r(호의 반지름))
ctx.lineTo(350,550);
ctx.strokeStyle = "black";
ctx.stroke();
</script>
</body>
</html>
결과:
반응형