181207 TIL Lec4 array parser step7 && 알고리즘 스터디(짝코딩)
Dec 7, 2018
»
1막,
TIL (Today I Learned)
Lec4 array parser step7
배열/객체 비교하는 deepEqual 쓰면서 인터넷 코드 참고했는데, 생각없이 Object.prototype까지 다 써서 ㅎㅎ 아마 ‘이눔자식 인터넷보고했군’ 이라고 생각하시고 질문을 남겨주신거 같다.
프로토타입 체이닝은 수업때 하도 해서 이해가 되는데 이번엔 toString 함수가 정확히 어떻게 type을 반환하는지 몰랐다. 검색해도 잘 안 나오길래 비센스한테 물어봤는데, 그렇게 카카한테도 물어보고 토르코한테도 물어보면서 4명이 이 문제를 같이 알아보았다.
constructor의 name을 반환하는 것이라는 의견이 많았는데, name 값을 변경해도 출력값은 바뀌지 않는 것이다.
결국 알아보니 위의 답변처럼 내장된 Symbol.toStringTag 값을 출력하는 것을 알았다.
알고리즘 스터디
오늘 알고리즘 스터디는 js30을 따라하는 거였는데 canvas 다루는 강좌였다.
-
이번 프로젝트: #8 - Fun with HTML5 Canvas
-
방식: 헤드와 돌아가면서 30분동안 완성하기
-
설계
이번엔 설계 생각도 못하고 디립따 기억하는걸 줄줄이 썼다.
-
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#green';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 1;
let isDrawing = false;
let pointX = 0;
let pointY = 0;
let hue = 0;
let direction = true;
function draw(e) {
if(!isDrawing) return
hue++
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`
if(hue >= 360) {
hue = 0
}
ctx.moveTo(pointX, pointY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
pointX = e.offsetX
pointY = e.offsetY
if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
direction = !direction
}
if(direction) {
ctx.lineWidth++;
} else {
ctx.lineWidth--;
}
}
document.addEventListener('mousedown', (e) => {
isDrawing = true
pointX = e.offsetX
pointY = e.offsetY
})
document.addEventListener('mousemove', draw)
document.addEventListener('mouseup', (e) => isDrawing = false)
document.addEventListener('mouseout', (e) => isDrawing = false)
</script>
<style>
html,
body {
margin: 0;
}
</style>
</body>
</html>
- 느낀점: 지난 번에 아무것도 못한 게 너무 아쉬워서 이번엔 공부를 좀 해서 오긴 했다.
1. 캔버스 가져오기 document.querySelector('#draw')
2. ctx 선언 canvas.getContext('2d')
3. 캔버스 width, height 지정
4. 캔버스 스타일 지정(ctx.strokeStyle, ctx.lineJoin, ctx.lineCap, ctx.lineWidth=100)
5. 클릭 순간 알려주는 변수 설정 isDrawing = false
6. 선 시작과 끝 포인트 알려주는 변수 설정 lastX, lastY = 0
7. 마우스 움직임 감지하는 function 만들고 eventListener 만들기
function draw(e){console.log(e)} // canvas.addEventListener('mousemove', draw)
7. mouse down아닐 때 함수 실행 멈추기
draw(e) {if(!isDrawing) return
8. isDrawing 컨트롤하는 eventListener 만들기
canvas.addEventListener('mousedown', () => isDrawing = true)
('moustup', () => isDrawing = false)
('mouseout', () => isDrawing = false)
——— 여기까지 하면 마우스 클릭하고 움직일때만 콘솔에 찍힘 ———
9. isDrawing에 추가
ctx.beginPath()
ctx.moveTo(lastX, lastY); <- start from
ctx.lineTo(e.offsetX, e.offsetY) <-go to (offsetX,Y =실제 이벤트에서 오는 자료)
ctx.stroke();
lastX = e.offSetX
lastY = e.offSetY 로 맞춰주기 --> [lastX, lastY] = [e.offsetX, e.offsetY]
——— 여기까지 하면 시작점이 무조건 0,0 ———
10. canvas.addEventListener('mousedown', () => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY]
} )
11. 색깔 조절 (hue is part of Mother-effing hsl)
let hue = 0;
함수 내
ctx.strokeStyle = ``hsl(${hue}, 100%, 50%)```
맽 밑에 hue ++;
if(hue >+= 360){hue = 0}
12. maximun 도달하면 fade out?
let direction = true ; <- 굵기 building up
if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1){
direction = !direction <- fliping direction
}
if(direction){
ctx.lineWidth++; <- 0 ~100
} else {
ctx.lineWidth--; <- 100 ~ 0
}
캔버스 다루면 눈에 바로 결과물이 보여서 넘 재밌다. 빨리 하고싶다~
- 새로 알게된 점:
- canvas랑 관련된 키워드들 (moveTo, lineTo, stroke()… )