728x90
코로나로 인하여 언택트로 수업이나 설명을 해야할 경우가 많아졌습니다.
이 경우에 편하게 마우스로 간략하게나마 그림으로 설명을 하고, 이 내용을 이메일로 간편하게 보내는 프로젝트를
하면서 어디선가 찾아본 내용을 정리해 둡니다.
지금은 안드로이드 앱으로 개발하지만, 웹에서 사용은 어떤식으로 해야 하나 하고 검색하다가 발견한 내용입니다
안드로이드 앱에서는 손가락 터치로 그림이 그려지는데 , 웹 방식도 손가락 터치하는 기능이 되는지 조금 더 찾아봐야 겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스로 사인하기</title></head>
<body onload="init()">
<h3>웹에서 마우스로 사인하기</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue" width="1024" height="600">
</canvas>
<script>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.lineWidth = 2; // 선 굵기를 2로 설정
context.strokeStyle = "blue";
// 마우스 리스너 등록. e는 MouseEvent 객체
canvas.addEventListener("mousemove", function (e) { move(e) }, false);
canvas.addEventListener("mousedown", function (e) { down(e) }, false);
canvas.addEventListener("mouseup", function (e) { up(e) }, false);
canvas.addEventListener("mouseout", function (e) { out(e) }, false);
}
var startX=0, startY=0; // 드래깅동안, 처음 마우스가 눌러진 좌표
var drawing=false;
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
context.stroke();
}
function down(e) {
startX = e.offsetX; startY = e.offsetY;
drawing = true;
}
function up(e) { drawing = false; }
function move(e) {
if(!drawing) return; // 마우스가 눌러지지 않았으면 리턴
var curX = e.offsetX, curY = e.offsetY;
draw(curX, curY);
startX = curX; startY = curY;
}
function out(e) { drawing = false; }
</script>
</body>
</html>
728x90
'코딩교육 > Web' 카테고리의 다른 글
| 목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플 (0) | 2021.09.07 |
|---|---|
| 목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법 (0) | 2021.08.17 |
| 목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법 (0) | 2021.08.11 |
| 목동코딩학원,자바스크립트 FORM 필드 추가해서 새 페이지 여는 방법 (0) | 2021.08.09 |
| 목동코딩학원, php 서버의 폴더 존재 확인후,폴더 만들기 (0) | 2021.08.08 |