๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

JavaScript/Vanilla JS41

[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] Saving the Image [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/xOxE40I75GM ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ํ•ด ๋ณด์ž! ์šฐ์„  canvas์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์ง€์ •ํ•ด์ฃผ์ž. (๋ฐฐ๊ฒฝ์ƒ‰์„ ์ง€์ •ํ•ด์ฃผ์ง€์•Š์œผ๋ฉด ๋ฐฐ๊ฒฝ์ด ํˆฌ๋ช…ํ•˜๊ฒŒ ๋‚˜์˜ด) ctx.fillStyle = "white"; ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); ๋งŒ์•ฝ์— ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅํ•˜๊ณ ์‹ถ์ง€์•Š๋‹ค๋ฉด ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋œ๋‹ค. ์ถ”๊ฐ€ํ•  ๊ฒƒโ–ผ function handleCM(event) { event.preventDefault(); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); canvas.addEventListener("mousedown", startPai.. 2021. 4. 28.
[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] Filling Mode [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/2m_WnYeI1pA Fill ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ์ƒ‰์ƒ์„ ์„ ํƒํ•œ ํ›„ canvas๋ฅผ ํด๋ฆญํ•˜๋ฉด ๊ทธ ์ƒ‰์ƒ์œผ๋กœ canvas๊ฐ€ ์ฑ„์›Œ์ง€๋Š” ๊ฒƒ์„ ํ•  ๊ฒƒ์ด๋‹ค. fillRect() width์™€ height์— ์˜ํ•ด์„œ ๊ฒฐ์ •๋œ ์‚ฌ์ด์ฆˆ๋กœ (x, y) ์œ„์น˜์— ์ƒ‰์น ๋œ ์‚ฌ๊ฐํ˜•์„ ๊ทธ๋ฆผ. ์ถ”๊ฐ€ํ•  ๊ฒƒโ–ผ ctx.fillRect(50, 20, 100, 49); // x, y, width, height app.js const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); const colors = document.getElementsByClassName("jsColo.. 2021. 4. 27.
[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] Brush Size [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/j4cAIJutjVI ๋‹ค์Œ ๋‹จ๊ณ„๋กœ๋Š” jsRange ์•„์ด๋””๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š”๊ฒŒ ํ•„์š”ํ•˜๋‹ค. ์ถ”๊ฐ€ํ•  ๊ฒƒโ–ผ const range = document.getElementById("jsRange"); // range ์ด๋ฒคํŠธ๋Š” input์— ๋ฐ˜์‘ํ•  ๊ฒƒ์ด๋‹ค. if(range) { range.addEventListener("input", handleRangeChange); } function handleRangeChange(event) { console.log(event); } app.js const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); .. 2021. 4. 27.
[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] Changing Color [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/cq-l2zPUVoU Recap ํ›„์— ์šฐ๋ฆฌ๊ฐ€ ํ•  ์ผ์€ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด๋‹ค. index.html app.js const colors = document.getElementsByClassName("jsColor"); console.log(Array.from(colors)); ๊นœ๋นกํ•˜๊ณ  closePath()๋ฅผ ์•ˆ์ง€์›€.... function handleColorClick(event) { console.log(event.target.style); } Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick) ); ์ข€ ๋” ๋‹ค๋“ฌ์–ด๋ณด์ž. fun.. 2021. 4. 27.
[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] Recap! [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/LAG1ERXR2xQ ์ด์ „ ๊ฐ•์˜์—์„œ ํ”„๋กœ๊ทธ๋žจ์ด ์ž‘๋™์ด ์•ˆ๋œ๊ฑด canvas์— ์‚ฌ์ด์ฆˆ๋ฅผ ์•ˆ์ค˜์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๋‹ค. canvas element๋Š” ๋‘ ๊ฐœ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค. CSS ์‚ฌ์ด์ฆˆ์™€ ์›น๋ธŒ๋ผ์šฐ์ € ์ƒ์˜ ์‚ฌ์ด์ฆˆ. ์ด element์— width, height๋ฅผ ์ง€์ •ํ•ด์ค˜์•ผ ํ•œ๋‹ค. canvas.width = 700; canvas.height = 700; const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; ctx.strokeStyle = "#2c2c2c";.. 2021. 4. 27.
[๋ฐ”๋‹๋ผJS๋กœ ๊ทธ๋ฆผํŒ ๋งŒ๋“ค๊ธฐ] 2D Context [์ถœ์ฒ˜-์œ ํŠœ๋ธŒ ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders] https://youtu.be/IlANstQ1h3M MDN์„ ํ†ตํ•ด์„œ canvas์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋ณด์ž! ํ•„์š”ํ•œ๊ฑด ์ด ์‚ฌ์ดํŠธ์— ๋‹ค ์žˆ๋‹ค. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D CanvasRenderingContext2D - Web APIs | MDN CanvasRenderingContext2D The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for draw.. 2021. 4. 25.
๋ฐ˜์‘ํ˜•