javascript (16) - 캔버스 만들기 #4 (선 두께,모양, 색상팔레트)

선 두께 LineWitdh

<input type="range"> 활용하여 두께 조절 ui를 만든다.

min: 최소값, max: 최대값, value: 기본값, step: 조절값 (한 칸씩 조절할 때마다 0.1증가)

input 적용모습

선 모양

끝 모양을 변경할 수 있다. 기본적으로는 브러쉬 끝모양이 사각형이다.

ctx.linecap="round"로 설정하면 브러쉬 끝 모양이 둥글게 변한다.

commond 누른 후 linecap(메서드) 클릭하면 적용가능한 목록이 나온다.

<기본>	<ctx.linecap="round">

색상 팔레트

<input type="color">를 사용하여 색상 팔레트 ui를 만든다.

input-color 적용모습

기존 팔레트 색상말고 임의의 색상을 가져와서 사용할 수 있다.

html 요소 안에 data-를 사용하면 원하는 정보(string)를 넣을 수 있다. <div data-color="#0000">

단축키 tip: 옵션+쉬프트+i 누르면 다중선택 및 수정 가능

요소를 console.dir(evnet.target)에서 확인가능!
data-color를 data-tomato(임의이름)로 바꿔도 가능.

<HTML Collection 형태>

css에서 옵션을 줘야 형태가 확인가능하다!
div에 각 click 이벤트를 부여해 줘야한다.

배열 형태가 아니기 때문에 배열로 만들어주고
forEach구문을 사용하여 이벤트를 준다.

const line_Widh = document.getElementById("line_Widh");
const line_Color = document.getElementById("line_Color");
const color_options = Array.from(document.getElementsByClassName("color-option"));
// <div>는 html collection 형태이기 때문에 배열로 변경
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");


canvas.width = 800;
canvas.height = 800
ctx.lineWidth = line_Widh.value;
let isPainting = false;

function onMove(event) {

    if (isPainting) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        return;
    }
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
}

function startPainting() {
    isPainting = true;
}
function canclePainting() {
    isPainting = false;
}
function changeLineWidth(event) {
    ctx.lineWidth=event.target.value;
}
function changeLineColor(event) {
    ctx.strokeStyle=event.target.value;
    ctx.fillStyle=event.target.value;
}

function onColorClick(event) {
    console.dir(event.target);      //html data-color 요소 확인
    console.dir(event.target.dataset.color);  //임의색상 선택 값
    const colorValue = event.target.dataset.color;
    ctx.strokeStyle=colorValue;
    ctx.fillStyle=colorValue;
    line_Color.value=colorValue;   //사용자에게 임의색상 선택을 알려줌
}

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", canclePainting);
canvas.addEventListener("mouseleave", canclePainting);
line_Widh.addEventListener("change", changeLineWidth);
line_Color.addEventListener("change", changeLineColor);
// input 컬러 팔레트
color_options.forEach(color => color.addEventListener("click",onColorClick));
//배열에서 forEach 활용하여 div에 클릭이벤트 추가함

컬러체인지 함수 하나로 만들기!

const line_Widh = document.getElementById("line_Widh");
const line_Color = document.getElementById("line_Color");
const color_options = Array.from(document.getElementsByClassName("color-option"));
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 800
ctx.lineWidth = line_Widh.value;
let isPainting = false;

function onMove(event) {

    if (isPainting) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        return;
    }
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
}

function startPainting() {
    isPainting = true;
}
function canclePainting() {
    isPainting = false;
}
function changeLineWidth(event) {
    ctx.lineWidth=event.target.value;
}

// function changeLineColor(event) {
//     ctx.strokeStyle=event.target.value;
//     ctx.fillStyle=event.target.value;
// }
// function onColorClick(event) {
//     // console.dir(event.target);
//     // console.dir(event.target.dataset.color);
//     const colorValue = event.target.dataset.color;
//     ctx.strokeStyle=colorValue;
//     ctx.fillStyle=colorValue;
//     line_Color.value=colorValue;
// }

function changeColor(event) {
    const dataSetColor = event.target.dataset.color;
    const colorValue = event.target.value
    if(dataSetColor===undefined){
    ctx.strokeStyle=colorValue;
    ctx.fillStyle=colorValue;
} else {
    ctx.strokeStyle=dataSetColor;
    ctx.fillStyle=dataSetColor;
    line_Color.value=dataSetColor;
}
    
}

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", canclePainting);
canvas.addEventListener("mouseleave", canclePainting);
line_Widh.addEventListener("change", changeLineWidth);

line_Color.addEventListener("change", changeColor);
color_options.forEach(color => color.addEventListener("click",changeColor));

'프론트엔드 > javascript' 카테고리의 다른 글

javascript (16) - 캔버스 만들기 #4 (TEXT, SAVE ) (0)	2023.05.04
javascript (16) - 캔버스 만들기 #4 (색채우기, 이미지업로드) (0)	2023.05.04
javascript (16) - 캔버스 만들기 #3 (그림판) (0)	2023.05.02
javascript (16) - 캔버스 만들기 #2 (canvas API) (0)	2023.05.02
javascript (16) - 캔버스 만들기 #1 (canvas API) (0)	2023.05.02

juokey

javascript (16) - 캔버스 만들기 #4 (선 두께,모양, 색상팔레트)

선 두께 LineWitdh

선 모양

색상 팔레트

'프론트엔드 > javascript' 카테고리의 다른 글

티스토리툴바

javascript (16) - 캔버스 만들기 #4 (선 두께,모양, 색상팔레트)

선 두께 LineWitdh

선 모양

색상 팔레트

'프론트엔드 > javascript' 카테고리의 다른 글

'프론트엔드/javascript' Related Articles

티스토리툴바