밈 메이커 만들기 (2)

/JavaScript

 

밈 메이커 만들기 (1)

 

 

📌 Painting Lines

- 캔버스를 클릭했을 때 선을 그리도록 하고 싶다: 그럼 클릭했을 때의 위치 좌표를 알아야 하고, 이론적으로는 (0,0)을 클릭해도 클릭되었다고 떠야 한다.

function onclick(event){
	ctx.lineTo(event.offsetX, event.offsetY); //클릭한 곳의 좌표
    ctx.stroke(); //라인 그려주기
}
canvas.addEventListener("click", onclick);

 

- 만약 마우스를 움직일 때마다 다른 색이 나오게 하려면?

const colors = [] //컬러값 배열
const color = colors[Math.floor(Math.random()*colors.length)]
ctx.strokeStyle = color;

 

랜덤하게 다른 색상을 출력해 줄 것이다. 만약 여기서 동일한 path를 사용한다면 계속 색이 어지럽게 바뀔 것이다. fucntion 가장 앞줄에 beginPath로 새 경로를 시작한다면 이를 방지할 수 있다.

 

참고로 Math.random()은 암호학적으로 안전한 난수가 아니다. 보안과 관련해서는 Web Crypto API를 활용하는 것이 좋다.

 

 

 

📌 여기서 살짝 응용해 본다면...

- 클릭할 때마다 클릭한 위치부터 선이 그어지고 + 색 테마가 렌덤하게 변화하는 코드를 작성해 보았다.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

ctx.lineWidth = 2;

const colors = {
    ocean: [
        "#67aaed",
        "#274668",
        "#686dc1",
        "#e3dfc9",
        "#4a9cc8",
        "#64b8c5",
        "#4b2cba",
        "#8cb8e2",
        "#2f15dd",
        "#5fa4fd"
    ], passion: [
        "#caf083",
        "#fb928b",
        "#f88082",
        "#d21908",
        "#d6f975",
        "#ffb7b7",
        "#c0200b",
        "#acdb3e",
        "#fc826f",
        "#d8dfa8"
    ], romi: [
        "#e2cdf1",
        "#501db7",
        "#686dc1",
        "#e3dfc9",
        "#7b20e2",
        "#e1cce4",
        "#e1d3f0",
        "#e4b0ae",
        "#8803bd",
        "#43425b"
    ], nature: [
        "#429ed7",
        "#9dcab7",
        "#5fa5c8",
        "#92c826",
        "#f8fbb6",
        "#dde985",
        "#409de9",
        "#165227",
        "#165244",
        "#7eb547"
    ]
}

let selectedTheme;
let cvsX = 0;
let cvsY = 0;

function theme() {
    const picked = Object.keys(colors);
    const randomTheme = picked[Math.trunc(Math.random()*picked.length)];
    selectedTheme = colors[randomTheme];
}

function onmove(event) {
    ctx.beginPath();
    ctx.moveTo(cvsX, cvsY);
    const color = selectedTheme[Math.trunc(Math.random()*selectedTheme.length)];
    ctx.strokeStyle = color;
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
}

theme();

canvas.addEventListener("click", (event) => {
    if(!selectedTheme) {
        theme();
        ctx.beginPath();
        cvsX = event.offsetX;
        cvsY = event.offsetY;
    } else {
        theme();
        ctx.beginPath();
        cvsX = event.offsetX;
        cvsY = event.offsetY;
    }
});

canvas.addEventListener("mousemove", onmove);

 

테마를 랜덤하게 받아올 수 있도록 하는 부분이 어려웠고, 내가 원하는 방식대로 한 지점에서 계속 직선이 그어지는 것이 아니라 자꾸만 마우스를 따라다니면서 어지럽게 색이 바뀌길래 그 부분을 잡는 것이 난관이었다.

 

 

아무튼 완성! 뿌-듯