step03. canvas (그림판 예제)
그냥 예제이다. 받아들일 수 있는 만큼받 받아들이면서 즐기라고 말했다.
<style>
canvas{
border:1px solid grey;
}
</style>
</head>
<body>
<h1>canvas에 그림 그리기</h1>
<!-- javascript로 그림을 그릴 수 있는 canvas 요소-->
<canvas width="500" height="500" id="myCanvas"></canvas>
<script>
// canvas의 참조값 얻어오기
let canvas = document.querySelector("#myCanvas");
// canvas에 렌더링 할 수 있는 도구의 참조값 얻어오기
let context = canvas.getContext("2d");
// 선의 색상 지정
context.strokeStyle="green";
// 선의 굵기 지정 (number type 으로 지정)
context.lineWidth=10;
// 선의 시작과 끝을 둥글게
context.lineCap="round";
context.beginPath(); // 경로시작
context.moveTo(100,100); // 시작점으로 이동
context.lineTo(200,200); // 이을 점 지정
context.stroke(); // 이때 그려짐. 실제 그리기
context.strokeStyle="red";
context.lineWidth=5;
context.beginPath();
context.moveTo(200,200);
context.lineTo(300,100);
context.stroke();
</script>- canvas 요소는 종이고, context는 도구이다.
<h1>그림판</h1>
<canvas id="myCanvas" width="500" height="500"></canvas>
<br><input type="color" id="inputColor">
<select id="lineWidth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option>4</option>
<option selected>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<script>
let canvas = document.querySelector("#myCanvas");
let context = canvas.getContext("2d");
// mouser가 down 된 상태인지 여부를 관리할 변수를 만들고 초기값으로 false를 대입
let isMouseDown = false;
// canvas에 mousedown event가 일어났을 때, 실행할 function 입력
document.querySelector("#myCanvas").addEventListener("mousedown", function(e){
// event가 일어난 곳의 좌표에서 그림을 그릴 준비를 한다.
isMouseDown = true;
let eventX = e.offsetX;
let eventY = e.offsetY;
context.beginPath();
context.moveTo(eventX, eventY);
});
document.querySelector("#myCanvas").addEventListener("mousemove", function(e){
// web browser야 mouse가 down된 상태에서만 아래의 코드를 실행해줘
if(isMouseDown){
let eventX = e.offsetX;
let eventY = e.offsetY;
context.lineTo(eventX, eventY);
context.stroke();
};
});
/*
document.querySelector("#myCanvas").addEventListener("mouseup", function(e){
isMouseDown = false;
});
document.querySelector("#myCanvas").addEventListener("mouseout", function(e){
isMouseDown = false;
});
*/
document.querySelector("#body").addEventListener("mouseup", function(e){
isMouseDown = false;
});
// input type="color" 에 change event가 일어났을 때 실행할 함수 등록
document.querySelector("#inputColor").addEventListener("change", function(){
// 현재 색상 값을 읽어와서
let thisColor = document.querySelector("#inputColor").value;
// context에 반영한다.
context.strokeStyle = thisColor; // 여기는 색상만 들어감
});
// 기본 선의 굵기 지정
context.lineWidth = 5;
/*
document.querySelector("#lineWidth").addEventListener("change", function(){
// 현재 굵기 값을 읽어와서
let thisWidth = document.querySelector("#lineWidth").value;
// context에 반영한다.
context.lineWidth = thisWidth;
});
*/
document.querySelector("#lineWidth").addEventListener("change", function(){
/*
event가 일어난 바로 그 요소의 참조값은 this로 얻어낼 수 있다.
*/
// select 에 선택된 option value 값을 읽어온다.
let thisWidth = this.value;
context.lineWidth = thisWidth;
});
</script>- change event : 해당 요소에 대한 변화(change)가 일어났을 때의 event를 조작할 수 있다.
이것을 이용해서 굵기와 색상 변화에 대한 반영을 새롭게 해준다.
굵기 option에 value 가 없는 경우 inner text가 value가 된다. - 색상 반영 #OOOOOO : O 두 칸씩 끊어서 각각 r(red), g(green), b(blue)에 해당하는 정보이다. 각각 16진수 두 자리를 차지하기 때문에 00부터 ff까지 총 256의 경우의 수가 생긴다. 숫자로 하면 0부터 255이다. 0부터 9는 숫자로 대응되고, 10부터 15까지가 a~f로 대응된다.
- this : addEventListener 함수에 전달되는 함수 안에서 사용하게 된다면 event가 발생한 바로 그 요소에 대한 참조값을 받아낼 수 있다.
참고 (16진수 읽고 쓰기)
- 사실상 2진수랑 다를 것이 없다. 2진수는 각 자리가 2의 0승, 1승, 2승... 인 것처럼 16진수도 같다.
때문에 16을 쓴다면 10_(16), 17을 쓴다면 11_(16)이 된다. - 16진수를 2진수로 바꾸려고 한다면 각 자리의 수를 2진수로 바꾼 다음 쭉 이어붙이고, 앞쪽의 0을 날리면 된다.
- 역으로 2진수를 16진수로 바꾸려고 한다면 네 자리씩 묶어서 16진수로 바꿔주면 된다.
'뒷북 정리 (국비 교육) > javascript' 카테고리의 다른 글
| [javascript] step05. operator (연산자) : 산술 연산자 (0) | 2021.12.09 |
|---|---|
| [javascript] step04. loop (0) | 2021.12.09 |
| [javascript] step02. event (0) | 2021.12.08 |
| [javascript] step01. datatype : function (0) | 2021.12.08 |
| [javascript] step01. datatype : object (plane object, array) (0) | 2021.12.08 |
댓글