[์ถ์ฒ-์ ํ๋ธ ๋ ธ๋ง๋ ์ฝ๋ Nomad Coders]
๋จผ์ canvas ์์ ๋ง์ฐ์ค๊ฐ ์ฌ๋ ค์ ธ์์ผ๋ฉด ๊ทธ๊ฒ์ ๊ฐ์งํ๋ javascript๋ฅผ ๋ง๋ค ๊ฒ์!
app.js์ ์ฝ๋ฉ์ ํ๋ค.
const canvas = document.getElementById("jsCanvas");
function onMouseMove(event) {
console.log(event);
}
if(canvas) {
canvas.addEventListener("mousemove", onMouseMove);
}
window์์ ๊ฐ์์์์ฒ๋ผ ๋ง์ฐ์ค๋ฅผ ์์ง์ด๋ ์ฆ์ console์ฐฝ์ ๋ฐ๋ก๋ฐ๋ก ์ถ๋ ฅ์ด ๋์ง์์.
์ฌ์ค window ๋ฌธ์ ์ธ์ง ๋ด ์ปดํจํฐ ๋ฌธ์ ์ธ์ง ์์ ์์. ์ด ๊ธ์ ๋ณด๊ณ ๊ณ์ ๋ถ๋ค๋ ํ๋ฒ ํ์ธํด ๋ณด์ธ์!!
ํ์ง๋ง ์ฐ๋ฆฌ๋ ์บ๋ฒ์ค ์์ ์ขํ๊ฐ ์ฐํ๊ธธ ์ํ๋ค ํจ..
(์์ ์ฐํ screen, client ์ขํ๋ ํ๋ฉด์ ์ขํ๋ผ๊ณ ํฉ๋๋ค)
offset์ด canvas ์ ์ขํ๋ผ๊ณ ํฉ๋๋ค.
๋ค์์ผ๋ก ํด๋ฆญํ์ ๋ ๋ฐ์ํ๋ event์ธ MouseDown์ ๋ง๋ค์ด ๋ณด์.
const canvas = document.getElementById("jsCanvas");
function onMouseMove(event) {
const x = event.offsetX;
const y = event.offsetY;
}
function onMouseDown(event) {
console.log(event);
}
if(canvas) {
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", onMouseDown);
}
๊ทธ๋ค์๋ถํด ๋ณต์กํ๋ค... ์ผ๋จ ๋ฐ๋ผ์ ์ฝ๋ฉํด๋ณด์...
๋์ถฉ ์์ฝํ์๋ฉด canvas์ ์ ์ ๊ทธ๋ฆด ์ค๋น๋ฅผ ํ๋จ๋ค...
const canvas = document.getElementById("jsCanvas");
let painting = false;
function stopPainting() {
painting = false;
}
function onMouseMove(event) {
const x = event.offsetX;
const y = event.offsetY;
}
function onMouseDown(event) {
painting = true;
}
function onMouseUp(event) {
stopPainting();
}
if(canvas) {
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);
canvas.addEventListener("mouseleave", stopPainting);
}
์ ์ ๊ทธ๋ฆด ์ค๋น ์๋ฃ!
'JavaScript > Vanilla JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ฐ๋๋ผJS๋ก ๊ทธ๋ฆผํ ๋ง๋ค๊ธฐ] Recap! (0) | 2021.04.27 |
---|---|
[๋ฐ๋๋ผJS๋ก ๊ทธ๋ฆผํ ๋ง๋ค๊ธฐ] 2D Context (0) | 2021.04.25 |
[๋ฐ๋๋ผJS๋ก ๊ทธ๋ฆผํ ๋ง๋ค๊ธฐ] Styles part Two (0) | 2021.04.23 |
[๋ฐ๋๋ผJS๋ก ๊ทธ๋ฆผํ ๋ง๋ค๊ธฐ] Styles part One (0) | 2021.04.23 |
[๋ฐ๋๋ผJS๋ก ๊ทธ๋ฆผํ ๋ง๋ค๊ธฐ] Project Setup (0) | 2021.04.23 |
๋๊ธ