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 : 선으로 도형을 그렸을 때, 그 안을 채워주는 색상
'Study > Vanila JS' 카테고리의 다른 글
[노마드코더] 바닐라 JS로 그림 만들기 - line width (0) | 2023.09.27 |
---|---|
[노마드코더] 바닐라 JS로 그림 만들기 - mouse painting (0) | 2023.09.26 |
[노마드코더] 바닐라 JS로 그림 만들기 - painting lines (0) | 2023.09.26 |
[노마드코더] 바닐라 JS로 그림 만들기 - drawing project(2) (0) | 2023.08.28 |
[노마드코더] 바닐라 JS로 그림 만들기 - drawing project(1) (0) | 2023.08.28 |