그림판을 만들어보자
대충 이렇게 생겼다.
크게 3개의 div와 하나의 canvas로 나뉘어져있고 캔버스에는 캔버스 다른하나에는 레인지 input 다른하나에는 버튼 다른하나에는 색깔(파레트?)들이 있다.
색깔들은 또 각자의 div로 나뉘어졌다.
처음써보는 두가지 것이 있다
웹상에 따로 캔버스 형태의 모양을 만들어주는 용도이다
참고:MDN
input type range 는 range로 조절하는 형태의 모습을 만들어준다.
아래는 캔버스와 ragne type의 input 을 사용할때의 예제이다.
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls_range">
<input
type="range"
id="jsRange"
min="0.1"
max="5.0"
value="2.5"
step="0.1"
/>
</div>
각 각의 색파레트는 Html에서 배경색을 지정해주었으며 각자 크기와 넓이를 지정해주었다.
canvas의 경우 width 와 height를 지정해줘야 html에 나타난다.
전체 정렬은 Flex를 이용했다.
아래의 active 명령은 마우스 왼쪽 클릭시 아래 명령문이 활성화되며 변경을 나타내는 것이며
transform: sclae(0.98)은 x축방향 y축방향으로 사알짝 움직인다는 것이다
그냥 반짝 거리는 느낌임
참고:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
.controls_btns button:active{
transform: scale(0.98);
}
<button id="jsMode">Fill</button>
Js
const mode = document.getElementById("jsMode");
let filling = false;
function handleModeClick(){
if (filling == true){
filling = false;
mode.innerText = "Fill"
} else{
filling = true;
mode.innerText = "Paint"
}
형태로 버튼 내부의 글자를 바꾸는 용도로도 사용 가능하다.
canvas.addEventListener("mousemove", onMouseMove); // Mousemoving을 통해 localstorage에 MouseEvent 명목으로 좌표값이 날아가게됨.
canvas의 파라미터이며 아래와 같이 사용 될 수 있다.
const ctx = canvas.getContext("2d");
"2d", 2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 생성하게 합니다.
이런식으로 2차언 캔버스를 생성하는용도로 사용 된다.
모든 코드를 공유하는 것은 깃허브면 충분하니 사실상 굉장히 크게 와닿았던 코드만 몇가지 분석해보려한다.
const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
let painting =false;
let filling = false;
function stopPainting(){
painting = false;
}
function startPainting(){
painting = true;
}
function onMouseMove(event){
const x = event.offsetX;
const y = event.offsetY;
if(!painting){
console.log("creating path in",x , y);
ctx.beginPath();
ctx.moveTo(x, y); //마우스를 클릭안해도 path는 계속 생성되고 있지만 클릭과 동시에 else로 넘어가서 line to를 실행시킴(이전 path - > else path까지 실행)
}
else{
console.log("creating line in",x , y);
ctx.lineTo(x, y);
ctx.stroke()
}
}
function onmouseDown(event){
stopPainting();
}
먼저 canvas 와 ctx를 각각 변수로 설정하였으며 Selector를통해 html 로 부터 가져왔다.
Js에는 id css에는 class를 보통 쓴다고 하는데 .. 추후에 알게되지않을까 싶다.
그렇게 각 함수를 stop start 를 나뉘어 painting 시 boolean 값을 변경하게 만들었고
이를 아래의 onMouseMove함수에 이용하였다.
해당함수에는 x, y를 추가로 지정하여 마우스가 움직일때마다의 좌표를 주게 되었다.
그리고 조건문을 이용하여 ctx에 beginpath moveTo lineTo을 통해 좌표를 설정 해놓았다.
stroke 를 통해 그림을 그리게 해놓았다.
참고: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
PS. 사전스터디라지만 너무 방치되어있어 뭘 어떻게 공부해야할지 도저히 모르겠다.
무엇을 만들면서 모르는것만 겨우겨우 찾아 겨우 이해하며 (아직도 잘 이해가 안가는게 너무 많음)진행해야 하는것인지. 어디에 사용되는지도 모르게 그냥 인강이나 주구장창들으며
아 그렇구나 하며 일주일을 보내야하는 것인지 말이다.
빨리 캠프가 시작해서 이것저것 틀이 갖춰진채로 공부해보고싶다
끝.