-
CANVAS 연습1(선 그리기)게임/HTML 연습 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>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습6(글씨 쓰기) (0) 2018.06.25 CANVAS 연습5(이미지 그리기) (0) 2018.06.25 CANVAS 연습4(이미지 반복) (0) 2018.06.24 CANVAS 연습3(그라데이션) (0) 2018.06.23 CANVAS 연습2(사각형, 원) (0) 2018.06.22
