[HTML/Canvas] 공 움직이기 애니메이션(basic ver)

공 움직이기 애니메이션(basic ver) mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 1. 공 그리기 HTML JS const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const ball = { // 초기 위치 x: 100, y: 100, // 속도 vx: 5, vy: 1, radius: 25, color: "blue", draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); }, }; b..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 27.
• textsms

[HTML/canvas] 장애물을 피해 마우스 움직이기 게임

미리보기 🔺마우스로 장애물 사이를 지나간다. 🔺장애물을 건드리면 게임종료 개요 순서 A. 마우스로 장애물 사이를 지나간다. B. 장애물을 건드리면 게임종료 C. 확인창에서 확인 누를 경우(restart?) 재시작 장애물 새로 생성 마우스 위치 초기화 종료 애니메이션 종료 코드 // 마우스로 구멍 피하기 게임 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // 구멍 const holeRadius = 30; const totalHoles = 30; let requestId; let isGameOver = false; let user; let holeArray = []; canvas.addEventLi..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 26.
• textsms

[HTML/canvas] Basic animations(2/2)

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 파노라마 * ******************************** * 파노라마 * ********************************* */ var img = new Image(); // 변수 img.src = "images/shinee_concert.jpg"; var CanvasXSize; var CanvasYSize; var speed = 1; // 애니메이션 업데이트 속도 var scale = 0.5; var y = 0; // 수직 옵셋 var dx = 0.75; // 캔버스에서의 이동량(음수 왼쪽, 양수 오른쪽) var imgW; var imgH; var x = 0; // 이미지 위치 var clearX; var clearY;..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 26.
• textsms

[HTML/canvas] Basic animations(1/2)

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 The current time var sun = new Image(); var moon = new Image(); var earth = new Image(); function init() { sun.src = "images/3nee_20.jpg"; moon.src = "images/3nee_20.jpg"; earth.src = "images/3nee_20.jpg"; window.requestAnimationFrame(drawSolarSystem); } function drawSolarSystem() { var ctx = document.getElementById("canvas1").getContext("2d"); /* * 애니메이션 장면 단계 *..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 22.
• textsms

[HTML/canvas] Compositing and clipping

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 function draw() { // 클리핑 var ctx = document.getElementById("clippingCanvas").getContext("2d"); // cliping ctx.fillRect(0,0,150,150); ctx.translate(75,75); // 네모 중심으로 이동 ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2, true); ctx.clip(); const lingrad = ctx.createLinearGradient(0, -75, 0, 75); lingrad.addColorStop(0, "#232256"); lingrad.addColorStop(1, "#143778"); ctx..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 22.
• textsms

[HTML/canvas] 변형 (transformations)

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 function drawTrans() { var ctx = document.getElementById("transCanvas").getContext("2d"); // save(상태저장) & restore(가장 최근 canvas 상태 복원) /* * 이게 개념이 헷갈릴 수 있는데 * 저장공간 스택에 save로 상태를 push하고 * restore로 pop해서 복원하는 것 * (restore를 실행취소로 잘못 생각했었음) */ ctx.fillRect(0,0,150,150); ctx.save(); // 기본 상태 저장(push1) // 설정 변경 ctx.fillStyle = "#09F"; ctx.fillRect(15,15,60,120); ctx.fil..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 22.
• textsms