본문 바로가기
Study/Vanila JS

[노마드코더] 바닐라 JS로 그림 만들기 - paint color(1)

by 22정민 2023. 9. 27.

https://nomadcoders.co/javascript-for-beginners-2

 

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

Build a Meme Maker

nomadcoders.co

<!--index.html-->

<input type="color" id="color" />

이것이 color input임

 

 

 

 

 

 

 

 

 

//app.js

const color = document.getElementById("color");

color input으로 색상 바꾸기(addEventListener 추가)

//생략
function onColorChange(event) {
  ctx.strokeStyle = event.target.value;
  ctx.fillStyle = event.target.value;
}
//생략
color.addEventListener("change", onColorChange);

1. strokeColor : 선 색상

2. fillColor : 선으로 도형을 그렸을 때, 그 안을 채워주는 색상