๐Ÿ“”
web_study
  • JavaScript
  • ์—˜๋ฆฌ_์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ
      • ํด๋ž˜์Šค ์˜ˆ์ œ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜
      • ์—ฐ์‚ฐ์ž boolean
      • ํ•จ์ˆ˜ ์ •์˜, ํ˜ธ์ถœ ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ
      • ๋ณ€์ˆ˜ํƒ€์ž…๊ณผ object ์ฐจ์ด์ 
    • JavaScript async ์™€ await
    • JavaScript Promise
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ callback
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ json
    • ์œ ์šฉํ•œ 10๊ฐ€์ง€ ๋ฐฐ์—ด ํ•จ์ˆ˜๋“ค
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด(array)
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ object
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (class vs object) ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ.๋ฐ˜๋ณต๋ฌธ
    • ๋ฐ์ดํ„ฐํƒ€์ž…, data types, let vs var, hoisting
    • script async ์™€ defer์˜ ์ฐจ์ด์  ์ฝ˜์†” ์ถœ๋ ฅ
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—ญ์‚ฌ
  • ์ƒํ™œ์ฝ”๋”ฉ
    • ์žฌ๊ท€ํ•จ์ˆ˜
    • ์ •๊ทœ ํ‘œํ˜„์‹
    • ๊ฐ์ฒด์ง€ํ–ฅ
      • ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
      • ์ƒ์„ฑ์ž์™€ new
      • ์ „์—ญ๊ฐ์ฒด
      • this
      • ์ƒ์†
      • prototype
      • ํ‘œ์ค€ ๋‚ด์žฅ ๊ฐ์ฒด์˜ ํ™•์žฅ
      • object
      • ๋ฐ์ดํ„ฐ ํƒ€์ž…
      • ์ฐธ์กฐ
    • ํ•จ์ˆ˜์ง€ํ–ฅ
      • ์œ ํšจ๋ฒ”์œ„
      • ๊ฐ’์œผ๋กœ์„œ์˜ ํ•จ์ˆ˜์™€ ์ฝœ๋ฐฑ
      • ํด๋กœ์ €
      • arguments
      • ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ
    • UI API, ๋ฌธ์„œ
    • ๋ชจ๋“ˆ
    • ๊ฐ์ฒด
    • ๋ฐฐ์—ด
    • ํ•จ์ˆ˜
    • ๋ฐ˜๋ณต๋ฌธ
    • ์กฐ๊ฑด๋ฌธ
    • ์ˆซ์ž์™€๋ฌธ์ž
    • ๋ณ€์ˆ˜
    • ๋น„๊ต
  • ๋…ธ๋งˆ๋“œ ์ฝ”๋”
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • ์กฐ๊ฑด๋ฌธ ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(๋ณ€์ˆ˜!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script ๋ถ€๋ถ„
    • form๋ถ€๋ถ„
    • ์›น์ ‘๊ทผ์„ฑ
    • <meta>
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ_์ด๋ก 
    • ๊ธฐ๋ณธ์ง€์‹(JAVASCRIPT)
    • ๊ธฐ๋ณธ์ง€์‹(CSS)
    • ๊ธฐ๋ณธ์ง€์‹(HTML)
    • ๊ธฐ๋ณธ์ง€์‹(HTTP)
    • Dom
    • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”„๋ ˆ์ž„์›Œํฌ, ํ”Œ๋กœ๊ทธ์ธ
Powered by GitBook
On this page

Was this helpful?

  1. javascript30

Canvas Draw

// ์บ”๋ฒ„์Šค์— ๊ทธ๋ฆผ๊ทธ๋ฆฌ๊ธฐ 
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55'; 
ctx.lineJoin = 'round'; // ์„ ์ด ๊บฝ์ด๋Š” ๋ถ€๋ถ„์˜ ์Šคํƒ€์ผ ์ง€์ •
ctx.lineCap = 'round';  // ์„  ๋ ๋ถ€๋ถ„์˜ ์Šคํƒ€์ผ ์ง€์ •
ctx.lineWidth = 100;
// ctx.globalCompositeOperation = 'multiply';

let isDrawing = false; // ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฐํ›„์— ๋งˆ์šฐ์Šค๋ฅผ ๋• ์„๋•Œ ๋ฉˆ์ถฐ์•ผํ•˜๋ฏ€๋กœ 
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;

function draw(e) {
  if (!isDrawing) return; // mouse down ์•„๋‹ˆ๋ฉด ํ•จ์ˆ˜์‹คํ–‰์„ ๋ฉˆ์ถฐ๋ผ 
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;// ๋„ํ˜•์˜ ์œค๊ณฝ์„  ์ƒ‰์„ ์„ค์ •
  ctx.beginPath();  // ์บ”๋ฒ„์Šค๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ ์ƒˆ๋กœ์šด path๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ
  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);    //e.offsetX, e.offsetY ๋งˆ์šฐ์Šค ์ด๋™์— ๋”ฐ๋ผ EventListener๋ฅผ ๊ฑธ์–ด ๋†“์€ ์ด๋ฒคํŠธ ๊ฐ์ฒด -> ๋งˆ์šฐ์Šค ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ ํ•˜๊ณ  draw ํ•จ์ˆ˜์—์„œ ์ด๋ฅผ ์‚ฌ์šฉ
  ctx.stroke(); // ์œค๊ณฝ์„ ์„ ์ด์šฉํ•˜์—ฌ ๋„ํ˜•์„ ๊ทธ๋ฆฌ๋Š” ํ•จ์ˆ˜
  [lastX, lastY] = [e.offsetX, e.offsetY]; 

  hue++;
  if (hue >= 360) {
    hue = 0;
  }
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }

  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }

}

canvas.addEventListener('mousedown', (e) => {   //์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ถ”๊ฐ€
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw); // ๋งˆ์šฐ์Šค๊ฐ€ ์›€์ง์ผ๋•Œ draw ํ•จ์ˆ˜ ์‹คํ–‰
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

canvas.addEventListener("mousedown", (e) => {
    if (e.which === 1) {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    } else if (e.which === 3) {
// canvas ์ง€์šฐ๋Š” ๋ถ€๋ถ„
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
  });
<canvas id="draw" width="100%" height="100vh"></canvas>
Previoustype aheadNextSpeech Synthesis

Last updated 3 years ago

Was this helpful?