javascript (16) - 캔버스 만들기 #4 (TEXT, SAVE )

TEXT 입력하기

작동 : input 창에 텍스트 입력 후 캔버스 더블클릭하면 해당 텍스트가 입력

 

1) 텍스트를 표시하는 방법은 2가지가 있다.

ctx.storkeText : 선으로만 텍스트를 나타낸다.

ctx.fillText : 면으로 텍스르틑 나타낸다.

 

2) 폰트를 불러올 때 라인 굵기가 1이여야 한다. 이후 선을 그릴 때 선 굵기가 1인 상태로 유지되기 때문에 스타일 저장, 불러오기가 필요하다.

ex) 굵기 10으로 그림을 그리고 폰트를 적용하면 굵기가 1로 변경된다. 기존 상태에서 그림을 그리면 굵기 1인 브러쉬로 변경된다.

ctx.save(); 현재 상태 색상,스타일 모든것을 저장

ctx.restore(): 이전 저장한 상태로 돌아간다.

save와 restore 사이에서 변하는 것들은 저장하지 않음

 

3) text의 peoperty : size, font-family가있다.

 

4) input창에 텍스트가 없을경우 더블클릭해도 아무것도 일어나지 않게 해야한다.

Save

그림 그림을 URL로 변환 / a태그 이용하여 URL 링크 생성 / a 링크 다운로드

canvas.toDataUrl : 내가 그린 이미지를 저장하면 base64로 코딩된 URL데이터를 돌려준다. 텍스트로 나타난다.

url로 코딩된 이미지

 

---

코드

const saveBtn = document.getElementById("saveBtn");
const textInput = document.getElementById("text");
const fileInput = document.getElementById("file");
const eraser = document.getElementById("eraser");
const mode_reset = document.getElementById("mode_reset");
const mode_fill = document.getElementById("mode_fill");
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;
ctx.lineCap= "round";
let isPainting = false;
let isFilling = 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 onRest(event) {
    ctx.fillStyle= "white";
    ctx.fillRect(0,0,800,800);
}

// 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;
    }
}

function onMode() {
    if (isFilling) {
        isFilling = false;
        mode_fill.innerText = `Fill`
    } else {
        isFilling = true;
        mode_fill.innerText = `Draw`
    }   
}
function onFillColor(){
    if(isFilling) {
        ctx.fillRect(0,0,800,800);
    }
}
function onEraser() {
    ctx.strokeStyle="white";
    isFilling = false;
    mode_fill.innerText = `Fill`
}

function onFile(event) {
    const file = event.target.files[0];
    const url = URL.createObjectURL(file);
    const image = new Image();
    image.src=url;
    image.onload = function() {
     ctx.drawImage(image,0,0,800,800);
     fileInput.value=null;   
    }}


function onText(event) {
    const text = textInput.value;
    if(text !== "") {
    ctx.save();
    ctx.lineWidth=1;
    ctx.font=  "68px serif"
    ctx.fillText(text,event.offsetX, event.offsetY);
    ctx.restore();
}   
}

function onSave() {
    const url = canvas.toDataURL();
    const a = document.createElement("a");
    a.href =url;
    a.download = "myDrawing.png";
    a.click();
}

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));
mode_fill.addEventListener("click", onMode);
canvas.addEventListener("click",onFillColor);
mode_reset.addEventListener("click",onRest);
eraser.addEventListener("click",onEraser);
fileInput.addEventListener("change",onFile);
canvas.addEventListener("dblclick",onText);
saveBtn.addEventListener("click",onSave);