
๊ธฐ์ ์คํ/Javascript
์๋ฐ์คํฌ๋ฆฝํธ๋ก HTML5 ์บ๋ฒ์ค(Canvas)์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋ฐฐ๊ฒฝ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ์บ๋ฒ์ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์์ ์ ์ฉํ๋ ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์? ๊ตฌํํ๋ ๊ณผ์ ์ ์๋์ ๊ฐ์ต๋๋ค. ์บ๋ฒ์ค ํ๊ทธ๋ฅผ ์์ฑํฉ๋๋ค. ์บ๋ฒ์ค ์ปจํ ์คํธ(ctx) ๊ฐ์ฒด๋ฅผ ์ ์ํฉ๋๋ค. ์บ๋ฒ์ค ์ปจํ ์คํธ์ ์์๊ณผ ์์์ ์ฑ์ธ ๋ํ์ ๋ง๋ญ๋๋ค. ์์ ์๋ ์์๋ ์บ๋ฒ์ค๋ฅผ ์์ฑํ ํ ์ํ๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์์ผ๋ก ์บ๋ฒ์ค์ ์ ์ฉํ๋ ์์์ ๋๋ค. // html ์ฌ๊ธฐ์ ๋ง๋ค ๋ํ์ ์บ๋ฒ์ค์ ๊ฝ์ฐฌ ์ ์ฌ๊ฐํ์ผ๋ก fillRect์ ๊ฐ๋ก, ์ธ๋ก ๊ฐ์ ์บ๋ฒ์ค์ ๋์ด์ ๋์ด๋ก ์ค์ ํ ๊ฒ์ ์ ์ ์์ต๋๋ค. // javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#009ac8'; ctx.f..