먼저, 모질라 캔버스 API 사용법
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법 - Web API | MDN
<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리
developer.mozilla.org
라떼는~ 인터넷으로 플래시게임이라는 것을 많이 했었다
(지금은 유물속으로 사라진 야후꾸러기 같은...ㅜㅜ)
웹에서 이런 플래시게임을 할 수 있었던 것은, 어도비사의 플래시 플레이어 덕분이었다
그러나, 보안 문제로 어도비 플래시에 대한 지원이 점점 사라져서
지금은 유물이 되어버렸다
아무튼 어도비 플래시 없이도 웹에서 그림을 그리고 하는 그래픽을 구현할 수 있는데
그 중 하나가 바로 Canvas API를 사용하는 방법이다
HTML, JavaScript로 그림판 구현하기
<body>
<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(); // 터치 스크린
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>
예시
2편
2022.03.30 - [개발기록/Javascript] - [JS] 자바스크립트 캔버스 그림판 만들기 2 - canvas
[JS] 자바스크립트 캔버스 그림판 만들기 2 - canvas
자가격리 기념으로 할 일도 없어서 오랜만에 포스팅 2022.02.08 - [개발기록/Javascript] - [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas 먼저, 모질라
spectrum20.tistory.com
'개발기록 > Javascript' 카테고리의 다른 글
| [JS] 자바스크립트 스와이프 벽돌깨기 게임 만들기 - 1 (0) | 2022.06.12 |
|---|---|
| [JS] 자바스크립트 캔버스 그림판 만들기 2 - canvas (1) | 2022.03.30 |
댓글