게임/HTML 연습
CANVAS 연습1(선 그리기)
런던전통손만두
2018. 6. 21. 01:36
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>CANVAS 연습</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border: 1px dotted blue">CANVAS를 지원하지 않습니다.</canvas>
<!-- 캔버스의 기본적인 태그 선언 만약 캔버스가 지원되지 않는 브라우저면, 태그 안의 문구 표시된다-->
<script> //head에 똑같이 썼을 때 실행이 되지 않았다. 이유는 모르겠다.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); //getContext() 함수에 2d를 그린다고 선언 -> ctx변수에 적용
context.beginPath(); //선그리기를 시작한다.(경로를 초기화한다)
context.moveTo(100,50); //시작점으로 이동한다
context.lineTo(300,50); //선의 끝점으로 이동한다
context.lineTo(300,200);
context.lineTo(100,200);
context.lineTo(100,50); //좌표를 계산하여 사각형을 그린다.
context.lineWidth = 20; //선의 두께 변경
context.strokeStyle="yellow"; //선의 색 변경
context.stroke(); //선을 그린다. 마지막에 항상 stroke()을 호출해 주어야 그림이 실제로 그려진다
context.fillStyle="red" //빨간색으로 채운다.
context.fill(); //사각형 내부에 색 채운다.
</script>
</body>
</html>
결과:
반응형