본문 바로가기

javascript60

JavaScript 쿠키 · Canvas 폼 원호 완전 정리 HTML CanvasJavaScript 쿠키 · Canvas 폼 원호 완전 정리방문 카운트 쿠키와 폼 입력 기반 Canvas 원호 그리기를 데이터 변환 관점에서 정리합니다.0 오늘 분석할 코드document.cookie브라우저 쿠키 문자열을 읽거나 저장하는 API입니다.split()문자열을 기준 문자로 나누어 배열로 만듭니다.trim()문자열 앞뒤 공백을 제거합니다.Date현재 시간과 만료 시간을 계산하는 객체입니다.toUTCString()쿠키 expires에 넣을 날짜 문자열을 만듭니다.prompt()사용자에게 문자열 입력을 받는 대화상자입니다.arc()캔버스에 원 또는 원호 경로를 추가합니다.parseInt()문자열을 정수로 변환합니다.1 두 예제의 연결점방문 카운트 쿠키 예제는 브라우저에 값을 저장.. 2026. 7. 16.

Canvas 이미지·텍스트 완전 정리 Web Development · CanvasCanvas 이미지 · 텍스트drawImage, fillRect, 채운 원호, strokeText/fillText를 정리합니다.시작 오늘 분석할 코드이 장은 Canvas에 이미지와 텍스트를 그리는 방법, 그리고 마우스 드래그 이벤트로 선을 이어 그리는 방법을 다룹니다.const img = new Image(); img.onload = function() { context.drawImage(img, 20, 20, 100, 200); }; img.src = 'media/lion.jpg'; context.fillRect(20, 20, 100, 100); context.strokeText('Javascript 재밌다.', 50, 250);ImageCanvas에 그릴 이.. 2026. 7. 15.

Canvas 드래그 그리기 완전 정리 Web Development · CanvasCanvas 드래그 그리기마우스 이벤트와 GraphicEditor 클래스로 자유 그리기 흐름을 정리합니다.시작 오늘 분석할 코드이 장은 Canvas에 이미지와 텍스트를 그리는 방법, 그리고 마우스 드래그 이벤트로 선을 이어 그리는 방법을 다룹니다.let startX = 0, startY = 0; let drawing = false; function move(e) { if (!drawing) return; let curX = e.offsetX, curY = e.offsetY; draw(curX, curY); startX = curX; startY = curY; } class GraphicEditor { constructor(canvas, context) { thi.. 2026. 7. 15.

JavaScript 알까기 게임 - 랜덤 배치와 타이머 완전 정리 Web Development · JavaScript GameJavaScript 알까기 게임 - 랜덤 배치와 타이머 완전 정리숨겨진 정답 위치를 기억하고 맞히는 게임으로 배열, 랜덤, 타이머, 클릭 이벤트 흐름을 정리합니다.1 원본 코드가 만드는 게임 흐름이 예제는 24개의 이미지 칸 중 일부 칸을 정답으로 표시한 뒤, 일정 시간이 지나면 다시 숨기고 사용자가 기억한 위치를 클릭하게 만드는 게임이다. 핵심은 정답 위치를 화면에만 표시하는 것이 아니라 mark 배열에도 같이 기록해 두는 것이다.게임 시작정답 랜덤 배치기억 시간 진행정답 숨김클릭 판정화면의 이미지는 계속 바뀌지만 실제 정답 여부는 mark[index]에 남는다. 게임 로직에서는 화면 상태보다 데이터 상태를 기준으로 판정해야 한다.2 주요 변수.. 2026. 7. 15.

이전 1 2 3 4 ··· 15 다음

티스토리툴바