그림판 만들기
- html
- 네모박스
- 색을 선택하는 radio 버튼
- 색의 굵기를 선택하는 range
- css
- 네모 박스 border
- 색을 선택하는 radio 위치
- 색의 굵기를 선택하는 range 위치
- js
- 마우스 동작 읽기
- 마우스 동작 세분화 : 누를때, 땔때, 드래그
- 그리기 canvas
==================================
익명의 함수(어로우 표기법)
- function(매개변수)로 선언
- (매개변수,....) => {코드 작성} 대채 가능
- 익명의 함수로 정의
- 익명의 함수는 이름이 없어도 된다(사용자 지정가능)
- 복수로 사용할때 (a,b)형식
- 매개변수가 한 개일 경우 소괄호 생략가능
- 이벤트리스터의 메서드에서 매개 변수로 동작 지정하고 그 다음에 동작을 정의한다
// 기본형식
function add(a,b){
return a+b
}
// 익명의 함수
var kkk = function (a,b){ return a-b}
var abc = (a,b)=>{return a*b}
var ccc =( )=>{return 7;}
// 함수 이름이 : ddd 매개변수 (a,b) {코드}
ddd = (a,b)=>{
return a+b;
}
// 매개변수가 한 개일 경우 소괄호 생략가능
d12 =a => {
return a+30;
}===========================================
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mycanvas {
border: 2px solid;
}
</style>
</head>
<body>
<div>
<canvas id="mycanvas" width="500" height="500"></canvas>
</div>
<div>
검정<input type="radio" name="color" onclick="color(this.value)" value="black" checked>
빨강<input type="radio" name="color" onclick="color(this.value)" value="red">
파랑<input type="radio" name="color" onclick="color(this.value)" value="blue">
초록<input type="radio" name="color" onclick="color(this.value)" value="green">
지우개<input type="radio" name="color" onclick="color(this.value)" value="white">
색 선택<input type="color" name="color" onchange="color(this.value)">
<br>
선 굵기<input type="range" name="range" min="1" max="20" onchange="range(this.value)" value="0">
<br>
팬<input type="radio" name="shapes" onclick="type1(this.value)" value="pan" checked>
원형<input type="radio" name="shapes" onclick="type1(this.value)" value="circle">
사각형<input type="radio" name="shapes" onclick="type1(this.value)" value="square">
다각형<input type="radio" name="shapes" onclick="type1(this.value)" value="polygona">
</div>
</body>
<script>
const canvas = document.getElementById('mycanvas');
var myctx = canvas.getContext('2d');
var flag = false;
var Type1 = "pan";
var int = 0;
var nowX = 0;
var nowY = 0;
var endX = 0;
var endY = 0;
var startX = 0;
var startY = 0;
var earlyX = 0;
var earlyY = 0;
canvas.addEventListener('mousedown', () => {
clickM();
});
canvas.addEventListener('mouseup', () => {
endM();
});
canvas.addEventListener('mousemove', () => {
moveM();
});
color = c => {
myctx.strokeStyle = c;
myctx.beginPath();
}
range = r => {
myctx.lineWidth = r;
myctx.beginPath();
}
type1 = t => {
Type1 = t;
if (t == 'polygona') {
var int = prompt('몇각인지 숫자를 입력하세요');
}
};
function clickM() {
let e = window.event;
if (Type1 == "pan") {
flag = true;
myctx.moveTo((e.clientX - 8), (e.clientY - 8));
} else if (Type1 == "circle") {
flag = true;
nowX = e.offsetX;
nowY = e.offsetY;
console.log("시작 : " + nowX + "/" + nowY);
} else if (Type1 == "square") {
flag = true;
nowX = e.offsetX;
nowY = e.offsetY;
console.log("시작 : " + nowX + "/" + nowY);
} else if (Type1 == "polygona") {
}
};
function endM() {
let e = window.event
if (Type1 == "pan") {
flag = false;
} else if (Type1 == "circle") {
endX = e.offsetX
endY = e.offsetY
myctx.beginPath();
myctx.arc((nowX + ((endX - nowX) / 2)), (nowY + ((endY - nowY) / 2)), ((endX - nowX) / 2), 0, (2 * Math.PI));
myctx.stroke();
console.log("마지막 : " + endX + "/" + endY);
flag = false;
} else if (Type1 == "square") {
endX = e.offsetX
endY = e.offsetY
myctx.strokeRect(nowX, nowY, endX - nowX, endY - nowY);
console.log("마지막 : " + endX + "/" + endY);
flag = false;
} else if (Type1 == "polygona") {
}
}
function moveM() {
if (Type1 == "pan") {
if (flag) {
let e = window.event;
myctx.lineTo((e.clientX - 8), (e.clientY - 8));
myctx.stroke();
}
}
}
</script>
</html>
ㅇㅇ