-
HTML | Canvas์นดํ ๊ณ ๋ฆฌ ์์ 2023. 12. 25. 09:07
1. html canvas ์ด์ฉํ๊ธฐ
https://www.w3schools.com/html/html5_canvas.asp
HTML Canvas
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<canvas> ํ๊ทธ๋ ๊ทธ๋ํฝ์ ๊ทธ๋ฆฌ๊ณ ์ถ์ ๋ ์ฌ์ฉํ ์ ์๋ ํ๊ทธ์ด๋ค.
๋๋ฌธ์ ์ค์ง ๊ทธ๋ํฝ๋ง์ canvas ํ๊ทธ ์์ ๋ฃ์ ์ ์๋ค.
์ค์ ๊ทธ๋ํฝ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ํ์ฉํด์ ๊ทธ๋ฆฐ๋ค.
canvas๋ฅผ ํ๋ ์์ฑํด๋ณด์.
<canvas id="myCanvas" width="300" height="100"></canvas>
๊ทธ๋ผ ์๋์ ๊ฐ์ ๋น canvas๋ฅผ ๋ณผ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ทธ๋ํฝ์ ๋ฃ์ด๋ณด์
<script> var canvas = document.getElementById("myCanvas"); console.log(canvas); var canvasText = canvas.getContext("2d"); //getContext(ํ์ ) ๋ฉ์๋๋ก ๋๋ก์ ์ปจํ ์คํธ์ ์ ๊ทผํ๋ค. canvasText.moveTo(0,0); //์์ ํฌ์ธํธ๋ฅผ ์ง์ ํ๋ค. canvasText.lineTo(300,100); //๊ทธ๋ ค์ง path ์ง์ canvasText.stroke(); //๊ทธ๋ฆฌ๊ธฐ </script>
์ ๊ทธ๋ ค๋ณด๊ธฐ
<script> var canvas = document.getElementById("myCanvas"); var canvasText = canvas.getContext("2d"); canvasText.beginPath(); canvasText.arc(95, 50, 40, 0, 2 * Math.PI); //arc(์์ ์ค์ฌ x์ขํ, ์์ ์ค์ฌ y์ขํ, ๋ฐ์ง๋ฆ, ์์๊ฐ๋, ๋๊ฐ๋, ๋ฐฉํฅ์ค์ ) canvasText.stroke(); </script>
[html5] arc - canvas์์ ์ ๊ทธ๋ฆฌ๊ธฐ
1. ๊ฐ๋ arc - canvas์์ ์ ๊ทธ๋ฆฌ๊ธฐ arc๋ canvas์์ ์์ ๊ทธ๋ฆด ์ ์๋๋ก ํด์ฃผ๋ ๋ฉ์๋์ arc(x,y,๋ฐ์ง๋ฆ,์์ ๊ฐ๋ , ๋ ๊ฐ๋ , ๋ฐฉํฅ ์ค์ ) ์์ฑ ์ค๋ช x ์์ ์ค์ฌ x์ขํ y ์์ ์ค์ฌ y์ขํ ๋ฐ์ง๋ฆ ์์
devjhs.tistory.com
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
์บ๋ฒ์ค(Canvas) ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ - Web API | MDN
<canvas> HTML ์๋ฆฌ๋จผํธ๋ฅผ ์ดํด๋ณด๋ ๊ฒ์ผ๋ก ์ด ํํ ๋ฆฌ์ผ์ ์์ํด ๋ณด๊ฒ ์ต๋๋ค. ์ด ํ์ด์ง์ ๋์์ ์บ๋ฒ์ค 2D ์ปจํ ์คํธ๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์๊ฒ๋๊ณ , ์ฌ๋ฌ๋ถ์ ๋ธ๋ผ์ฐ์ ์์ ์ฒซ ๋ฒ์งธ ์์ ๋ฅผ ๊ทธ๋ฆฌ๊ฒ
developer.mozilla.org
https://www.youtube.com/watch?v=5iHejdqYIa8