자가격리 기념으로 할 일도 없어서 오랜만에 포스팅
2022.02.08 - [개발기록/Javascript] - [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas
[JS] 자바스크립트 캔버스 그림판 만들기1 - canvas
먼저, 모질라 캔버스 API 사용법 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage 캔버스(Canvas) 기본 사용법 - Web API | MDN HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습
spectrum20.tistory.com
지난 포스팅에서 canvas API를 이용해서 자바스크립트 캔버스를 구현해보았다
이번시간에는 좀 더 그림판같은 기능들을 추가해보겠다
모질라 디벨로퍼 canvas API 튜토리얼을 참고했다
1. 브러쉬 크기 조절하기
먼저 브러시 크기조절 기능을 추가해보겠다
브러쉬 크기조절을 위해 안에 브러쉬 크기를 입력받는 <input>코드를 넣어준다
브러쉬 크기<input id="input" type="number" min="0" max="100"></input>다음으로 스크립트에 line 스타일변경을 위한 코드를 추가해준다
ctx.lineWidth에 인풋값을 넣어주어서 인풋값이 변경될 때마다, 선의 굵기가 변경되게 한다
ctx.lineCap으로 브러시모양을 둥글게 바꿔준다
ctx.lineJoin으로 선이 부드럽게 그려지도록 해준다
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = canvas.getBoundingClientRect(); // 터치 스크린
// line 스타일
input.oninput = function(){
ctx.lineWidth = input.value;
}
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
2. 브러쉬 색깔 변경하기
먼저 파레트를 만들어준다
파레트는 버튼을 노가다로 만들어주었다
(좋아하는 색깔을 마구 추가했다)
<button onclick="colorChange('black')" style="background-color: black; width: 20; height: 20; border: solid 1px;"></button>
<button onclick="colorChange('blue')" style="background-color: blue; width: 20; height: 20; border: solid 1px;"></button>
<button onclick="colorChange('red')" style="background-color: red; width: 20; height: 20; border: solid 1px;"></button>
<button onclick="colorChange('green')" style="background-color: green; width: 20; height: 20; border: solid 1px;"></button>
다음으로 스크립트에서 button 클릭 이벤트를 만들어준다
ctx.strokeStyle로 선색을 변경한다
function colorChange(color){
ctx.strokeStyle = color;
}
3. 지우개 만들기
지우개는 버튼으로 만들어주었다
지우개기능은 특별한게 없이 그냥 브러시색깔만 배경색으로 바꿔주면 된다
전체지우기 버튼도 만들었다
<button onclick="colorChange('white')">지우개</button>
<button onclick="clearAll()">전체지우기</button>
전체 지우기는 ctx.clearRect를 사용한다
ctx.clearRect(x, y, width, height)
// 전체 지우기
function clearAll(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
4. 완성 코드
<body>
<div>
브러쉬 크기<input id="input" type="number" min="0" max="100" value="1"></input>
<button onclick="colorChange('black')" style="background-color: black; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('blue')" style="background-color: blue; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('red')" style="background-color: red; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('green')" style="background-color: green; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('pink')" style="background-color: pink; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('yellow')" style="background-color: yellow; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('skyblue')" style="background-color: skyblue; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('violet')" style="background-color: violet; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('lime')" style="background-color: lime; width: 20px; height: 20px; border: solid 1px;"></button>
<button onclick="colorChange('white')">지우개</button>
<button onclick="clearAll()">전체지우기</button>
</div>
<canvas id='canvas' width='500' height='500' style="border:1px solid black"></canvas>
</body>
<script>
var pos = {
drawable : false,
x : -1,
y : -1,
};
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = canvas.getBoundingClientRect(); // 터치 스크린
// 전체 지우기
function clearAll(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 스타일 추가
input.oninput = function(){
ctx.lineWidth = input.value;
}
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
function colorChange(color){
ctx.strokeStyle = color;
}
canvas.addEventListener("mousedown", listener);
canvas.addEventListener("mousemove", listener);
canvas.addEventListener("mouseup", listener);
canvas.addEventListener("mouseout", listener);
/// 터치 스크린
canvas.addEventListener("touchstart", listener);
canvas.addEventListener("touchmove", listener);
canvas.addEventListener("touchend", listener);
function listener(e){
switch(e.type){
case "mousedown":
drawStart(e);
break;
case "mousemove":
if(pos.drawable){
draw(e);
}
break;
case "mouseout":
case "mouseup":
drawEnd();
break;
case "touchstart":
touchStart(e);
break;
case "touchmove":
if(pos.drawable)
touch(e);
break;
case "touchend":
drawEnd();
break;
default:
}
}
function drawStart(e){
pos.drawable = true;
ctx.beginPath();
pos.x = e.offsetX;
pos.y = e.offsetY;
ctx.moveTo(pos.x, pos.y);
}
function touchStart(e){
pos.drawable = true;
ctx.beginPath();
pos.x = e.touches[0].pageX - rect.left
pos.y = e.touches[0].pageY - rect.top
ctx.moveTo(pos.x, pos.y);
}
function draw(e){
ctx.lineTo(e.offsetX, e.offsetY);
pos.x = e.offsetX;
pos.y = e.offsetY;
ctx.stroke();
}
function touch(e){
ctx.lineTo(e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top);
pos.x = e.touches[0].pageX - rect.left;
pos.y = e.touches[0].pageY - rect.top;
ctx.stroke();
}
function drawEnd(){
pos.drawable = false;
pos.x = -1;
pos.y = -1;
}
</script>
예시
브러쉬 크기
반응형
'개발기록 > Javascript' 카테고리의 다른 글
| [JS] 자바스크립트 스와이프 벽돌깨기 게임 만들기 - 1 (0) | 2022.06.12 |
|---|---|
| [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas (0) | 2022.02.08 |
댓글