공부기록장

색 바꾸기!!

<body>

</canvas>

</body>

input 태그를 추가해 준다.

그러면 바 옆에 색을 조정할 수 있는 게 생기고 여기서 원하는 색을 택할 수 있다.

하지만 자바스크립트랑 연결이 되지 않아서 현재 상태로는 색이 바뀌지 않는다.

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

color.addEventListener("change", onColorChange);

자바스크립트로 가서 컬러 인풋태그를 가져오고 아까와 마찬가지로 change 이벤트를 추가해 줄 것이다.

onColorChange 함수를 만들어서 아까와 마찬가지로 콘솔로 event.target.value 값을 출력해보면 색의 코드가 출력되는 것을 볼 수 있다.

function onColorChange(event) {

ctx.strokeStyle = event.target.value;

ctx.fillStyle = event.target.value;

}

event.target.value을 strokeStyle과 연결시켜 주면 (fillColor는 뒤에 가서 페인트통 기능을 만들 것임)

색을 바꿀 때마다 선의 색도 바뀐다!

이번에는

이렇게 미리 저장되어 있는 색 팔레트를 만들어 볼 것이다.

<body>

</canvas>

</body>

먼저 html문서 내에다가 이와 같이 div태그를 만들고 style 옵션으로 팔레트에 들어갈 배경색상을 지정해 준다.

data-color안에도 마찬가지로 해당 색상코드를 넣는다 (data- 옵션은 우리가 원하는 옵션을 만들어서 지정해 줄 수 있다. data-color가 아니라 data-tomato로 적어도 상관없다. 이것을 자바스크립트로 가져와서 쓸 것이다.)

.color-option {

width: 30px; height: 30px;

cursor: pointer;

}

css로 와서 크기를 지정해 주면

이와 같이 팔레트가 생성되었다.

const colorOptions = Array.from(document.getElementsByClassName('color-option'));

자바스크립트로 와서 방금 적었던 div 태그들을 가져온다. 뒤에서 forEach를 사용해야 하는데 forEach를 사용하려면 배열로 반환해줘야 하기 때문에 Array.from()이라는 함수를 이용하였다.

function onColorClick(event) {

console.log(event.target);

}

colorOptions.forEach((color) => color.addEventListener("click", onColorClick));

colorOptions를 folEacg함수를 이용해서 가져와서 클릭 이벤트를 추가해 준다.

그리고 콘솔 dir로 event.target 확인해보면

dataset이라는 것이 나온다.

function onColorClick(event) {

console.dir(event.target.dataset.color);

}

이것을 이용하여 이렇게 작성한 후 클릭해 보면

색들을 클릭해보면 이렇게 색깔 코드만 출력이 된다.

function onColorClick(event) {

ctx.strokeStyle = event.target.dataset.color;

ctx.fillStyle = event.target.dataset.color;

}

아까와 비슷하게 연결시켜 줌

function onColorChange(event) {

colorStyle(event.target.value)

}

function onColorClick(event) {

const colorValue = event.target.dataset.color

colorStyle(colorValue)

color.value = colorValue;

}

function colorStyle(color) {

ctx.strokeStyle = color;

ctx.fillStyle = color;

}

중복되는 부분이 많기 때문에 따로 함수를 만들어서 바꿔주었다.

그리고 지정된 팔레트를 클릭했을 때 input의 색도 바뀌게 하기 위해 onColorClick함수 안에 color.value 값을 event.target.dataset.color 값으로 연결시켜주었다.

채우기 버튼

html에 버튼을 만들어 준다.

버튼을 클릭하면 채우기모드, 한 번 더 클릭하면 그리기 모드로 바꾸는 기능을 만들 것이다.

let isFilling = false;

function onModeClick() {

if(isFilling) {

isFilling = false;

modeBtn.innerText = "Fill";

} else {

isFilling = true;

modeBtn.innerText = "Draw";

}

modeBtn.addEventListener("click", onModeClick);

js로 와서 불러와준다. 이전에 선을 그릴 때 클릭여부에 따라 false, true로 바뀌는 값을 이용했던 것처럼 이번에도 isFilling의 불린값을 이용할 것이다.

버튼의 텍스트도 모드에 따라 바꿔준다.

function onCanvasClick() {

if(isFilling) {

ctx.fillRect(0,0,800,800);

}

canvas.addEventListener("click", onCanvasClick);

canvas에 click 이벤트를 추가해 주고 onCanvasClick 함수를 만들어 isFilling이 true일 때 fillRect()를 이용하여 캔버스 크기만큼의 사각형을 만들어 색이 채워지도록 한다.

초기화&지우개 버튼

<button id="destroy-btn">Destroy</button>

const destroyBtn = document.getElementById("destroy-btn");

html 문서 내에 destroy 버튼을 생성하고 자바스크립트로 가져온다.

function onDestroyClick() {

ctx.fillStyle = "white";

ctx.fillRect(0, 0, 800, 800);

}

destroyBtn.addEventListener("click", onDestroyClick);

destroy 버튼을 클릭하면 그림판이 초기화되도록 만들 것이기 때문에 아까 채우기와 동일한 방법으로 만들되 채워지는 색을 하얀색으로 바꿔줄 것이다.

const CANVAS_WIDTH = 800;

const CANVAS_HEIGHT = 800;

canvas.width = CANVAS_WIDTH;

canvas.height = CANVAS_HEIGHT;

function onCanvasClick() {

if(isFilling) {

ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

}

function onDestroyClick() {

ctx.fillStyle = "white";

ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

}

캔버스의 넓이와 높이값이 반복적으로 나오기 때문에 이것을 상수로 지정해 주고 높이값과 넓이값이 있는 곳들을 방금 만든 상수로 지정해준다.

<button id="eraser-btn">Eraser</button>

const eraserBtn = document.getElementById("eraser-btn");

지우개 버튼을 생성한다

function onEraserClick() {

ctx.strokeStyle = "white";

isFilling = false;

modeBtn.innerText = "Fill";

}

eraserBtn.addEventListener("click", onEraserClick);

stroke색을 white로 바꿔주로

만약 채우기 모드일 때 색이 채워지지 않도록 하기 위해 isFilling을 false로 지정해줘야한다. 버튼 텍스트도 바꿔준다.

저작자표시 변경금지 (새창열림)

'기타 > 코딩일기' 카테고리의 다른 글

코딩일기: 데이터 과학을 위한 파이썬 Numpy 1일차 (0)	2023.06.28
코딩일기: 노마드 코더로 공부 9일차 (0)	2023.06.26
코딩일기: 노마드 코더로 공부 7일차(06.23) (0)	2023.06.24
코딩일기: 노마드 코더로 공부 6일차 (0)	2023.06.20
코딩일기: 노마드 코더로 공부 5일차 (0)	2023.06.19

색 바꾸기!!

초기화&지우개 버튼

'기타 > 코딩일기' 카테고리의 다른 글

티스토리툴바