자바스크립트 작성.
캔버스는 컨택스트를 가진 html의 요소
색상 바꾸기
html파일의 색상 버튼들에 클래스 jsColor를 추가 js파일에서 가져오기 --
const colors = document.getElementsByClassName("jsColor");
위의 색상 버튼들의 배열에 대해서 클릭에 대해서 클릭 이벤트를 부여해주기.--
Array.from(colors).forEach(color =>
color.addEventListener("click", handleColorClick)
);
클릭 이벤트를 작성. --
function handleColorClick(event){
const color = event.target.style.backgroundColor;
ctx.strokeStyle = color;
}
html에 작성된 각 색상 버튼들의 색을 가져오고, 스트로크의 스타일을 그 색으로 바꿔서 펜 색이 바뀌게 함.
이렇게 색이 다르게 그릴 수가 있다.
붓의 크기 조정
range는 크기, mode는 채우기 버튼. 이 둘을 가져옴-- const range = document.getElementById("jsRange"); const mode = document.getElementById("jsMode"); 채우기에 대한 참 거짓 값을 생성 -- let filling = false; 크기와 모드에 대해서 각각이 참일때(활성화 되었을 떄) 이벤트를 부여.--
if(range){
range.addEventListener("input", handleRangeChange);
}
if(mode){
mode.addEventListener("click", handleModeClick);
}
사이즈를 키웠을때 --
function handleRangeChange(event){
const size = event.target.value;
ctx.lineWidth = size;
} 사이즈 바의 크기만큼, 그리는 선의 굵기가 굵어진다.
채우기를 눌렀을 때. ---function handleModeClick(){
if(filling === true)
{
filling = false;
mode.innerText = "채우기";
} else{
filling = true;
mode.innerText = "그리기";
}}
채우기의 불리언 값의 참 거짓에 따라 채우기와 그리기로 모드가 변경된다.
사이즈가 변경되는 모습.
채우기 설정
캔버스 크기와 초기 붓색(검은색) 설정 -- const INITIAL_COLOR = "#2c2c2c"; const CANVAS_SIZE = 700;canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle = INITIAL_COLOR;
마우스 클릭에 대한 이벤트 할당을 하나의 함수에 몰아넣기.
canvas.addEventListener("click", handleCanvasClick);
에 대하여 함수
function handleCanvasClick() {
if (filling) {
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
}}
캔버스 사이즈 전체를 색으로 채워넣는다.
결과는 .
fillrect에 대해서 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=140169690495
x,y좌표에 크기만큼 사각형을 그린다.
저장하기.
이미지를 세이브하는 기능 자체는 내장되어 있다. 문제는 배경을 색칠하지 않고 선만 그으면 저장시 이미지의 배경이 없는 채로 저장 된다는 것, 이를 막을려면 이미지 저장의 기본 배경색을 정해야 한다. 세이브 버튼 가져오기 --const saveBtn = document.getElementById("jsSave"); 기본적으로 배경을 백색으로 칠하기 -- ctx.fillStyle= "white"; ctx.fillRect(0,0,CANVAS_SIZE,CANVAS_SIZE);우리는 우클릭으로 저장하는 식이 아니라 그림판의 저장버튼을 통해서 이미지를 저장하게 만들고 싶다 이를 위해서는 컨택스트 메뉴에 작동하는 우클릭을 막아야 한다.
컨택스트 메뉴를 누르게 되면-- canvas.addEventListener("contextmenu",handleCM);
이벤트 자체를 막아버리는 preventdefault를 실행. --
function handleCM(event){
event.preventDefault();
}
그럼 우클릭이 안된다.
이제 저장버튼을 작성해보자,
저장을 누르면 -- if(saveBtn){
saveBtn.addEventListener("click",handleSaveClick);
}
그린 모든 것을 넣고 이미지로 저장하도록 함-
function handleSaveClick(){
const image = canvas.toDataURL();
const link = document.createElement("a");
link.href = image;
link.download ="PaintJS[🎨]";
link.click();
}
canvas.toDataURL(); 에 대해서.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
즉 image는 현재의 이미지를 다운될 준비가 된 파일이 된다.
이후에 존재하지 않는 링크를 임시로 저장 버튼에 생성하고, 그 링크를 실시.
링크가 지정하는 대상은 image이므로 이미지 파일이 다운로드 되고.
다운로드는 이미지 파일의 이름을 정해준다.
이렇게 저장된 파일이 다운된다
