[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] 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