본문 바로가기

HTML53

[HTML] HTML5 이용하기 04 - Canvas이용한 시계 만들기 HTML5 이용하기 04 - Canvas이용한 시계 만들기 시계 만들기 1- 날짜 객체를 생성한다- .getHours(), .getMinutes(), .getSeconds()를 이용해 시간을 가져온다. ** 출력 결과 ** 시계 만들기 2- 초침, 분침, 시침을 넣는다.- 회전 각도는 rad이므로 따로 계산해주어야 한다. ** 출력 결과 ** 2017. 4. 18.
[HTML] HTML5 이용하기 03 - Canvas 이용하기 (170417) HTML5 이용하기 - Canvas 이용하기 Canvas 이용하기- 이용방법 캔버스의 참조값 얻어오기 var canvas = document.querySelector("#myCanvas");렌더링 할 context 객체의 참조값 얻어오기 var context = canvas.getContext("2d"); 외곽선 색상 context.strokeStyle선의 굵기 context.lineWidth, context.lineCap, context.lineJoin경로 시작 context.beginPath();시작점으로 이동 context.moveTo(100,200);이을점 지정 context.lineTo(500,0);그리기 context.stroke();경로 마무리 context.closePath();채우는 색 .. 2017. 4. 17.
[HTML] HTML5 이용하기 01 (170413) HTML5 이용하기 01 정규표현식의 기초var a = /ABCD/;var b = new RegExp("ABCD"); a.test("1232142"); false a.test("가나다란ㄹㅇㄴㄹㅇㄴ"); false a.test("가나다라ABCD1234"); true - 사용하는 곳특정 형식에 부합하는 형식을 추출할 때 사용 (주로 백엔드)특정 형식에 부합하는지 여부를 알아볼 때 사용 (주로 프론트엔드) 정규표현식 이용하기 - Step 01정규표현식은 대소문자를 구별한다. - Step 02눈에 보이지 않는 space, tab, new line도 중요하다- Step 03^는 매칭할 문자열의 시작을 의미하고 $는 매칭할 문자열의 끝을 의미한다.- Step 04 ^나 $등 특별한 의미를 가지고 있는 문자열의 li.. 2017. 4. 13.