Javascript를 사용하여 서명 그림 그리기 앱 만들기
1) 먼저 웹 페이지의 빈 템플릿을 만들고 캔버스 태그를 배치합니다.
그런 다음 getElementById를 사용하여 자바스크립트에서 캔버스에 액세스하고 캔버스의 높이와 너비를 창 높이와 너비를 2로 나눈 값으로 설정합니다.
다음과 같이 보일 것입니다 .. 가시성을 위해 본문의 배경색을 검은 색으로 설정했습니다
다음은 마우스 이벤트를 처리하는 것입니다.
2) 마우스 이벤트 처리
javascript에서는 문서 내에서 mouseup, mousedown, mousemove 등과 같은 마우스 이벤트에 액세스할 수 있거나 개별적으로 다른 요소 세트에 적용할 수 있습니다! 그래서 저는 이것을 캔버스에 적용할 것입니다. 매개변수를 허용하는 특정 요소에 addEventListener를 사용하여 그렇게 합니다.
element.addEventListener("event_name", callback function()");
여기서 콜백 함수는 이 이벤트 -> event_name이 트리거될 때마다 실행됩니다.. ! 이 경우 마우스 이동 이벤트입니다.
함수()의 이 e는 마우스의 x 및 y의 현재 위치를 가져오는 데 필요합니다.
이제 이벤트 리스너 외부에 두 개의 변수를 만들고 mouseX 및 mouseY를 e.clientX(x 좌표에서 X의 현재 위치 반환) 및 e.clientY(Y 좌표에서 마우스의 현재 위치 반환)로 설정하겠습니다.
참고: 자바스크립트에는 음의 x 및 y 위치가 없습니다. 캔버스의 (0, 0)은 캔버스의 왼쪽 위, 오른쪽 위 지점을 의미합니다.
이제 mousemove 이벤트를 사용하여 캔버스에 선을 그립니다. 일반적으로 다음과 같이 캔버스에 선을 그립니다.
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
하지만 두 개의 다른 이벤트에서 세 번째와 네 번째 줄을 교체할 예정입니다.
이제 두 개의 이벤트를 더 가져와야 합니다. 첫 번째 이벤트는 mousedown 및 mouseup입니다. 이러한 이벤트의 작동은 자명합니다.
또한 사용자가 마우스 클릭을 유지하고 있는지 추적하기 위해 isDrawing 변수가 필요합니다.
따라서 마우스 다운 이벤트에서 우리는
여기서는 lineTo를 쓰지 않습니다. 왜냐하면 마우스가 움직일 때 매초마다 바뀌기 때문입니다.
따라서 mousemove 이벤트에서 우리는
이제 브라우저에서 페이지를 열고 그림을 그리는 것을 볼 수 있습니다.
그러나 여기에 isDrawing 변수가 있습니다. 이 변수에서는 그려야 할 때를 제어할 수 없기 때문에 다음을 수행합니다.
먼저 isDrawing이라는 변수를 선언했습니다. mousedown 함수에서 drawing = true로 설정하고 mousemove 함수에서 isDrawing이 참인지 확인합니다. 그렇다면 그림을 그리고 있습니다. 마우스를 놓은 후 mouseup 이벤트가 트리거되고 더 이상 그림을 그리지 않습니다!
3) 캔버스를 png로 저장하려면
function downloadCanvas() {
var imageData = canvas.toDataURL("image/png");
let anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
anchorTag.href = imageData;
anchorTag.download = "imageData";
anchorTag.click();
document.body.removeChild(anchorTag);
}
요소를 생성하고 몇가지 소품을 설정하고 캔버스를 이미지로 변환하여 다운로드만 하면 되는 코드블록입니다!
이제 사진을 다운로드할 수 있는 버튼을 만들 수 있습니다...!
축하합니다. 서명을 작성하고 png 형식으로 다운로드할 수 있는 웹 앱을 만들었습니다.. !
4) 도전 시간
내 도전은 이 코드를 수정하고 다른 색상 등으로 로그인하는 기능을 추가하는 것입니다! 모두가 보고 배울 수 있도록 수정한 코드를 댓글로 달아주세요!! 읽어주셔서 감사합니다...!
여기 전체 코드가 있습니다!
<!DOCTYPE html>
<html lang="en">
<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>
body {
background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<button onclick="downloadCanvas();">Save</button>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth / 2;
canvas.height = window.innerHeight / 2;
canvas.style.background = "white";
let mouseX = 0;
let mouseY = 0;
let isDrawing = false;
canvas.addEventListener("mousedown", function (e) {
isDrawing = true;
ctx.beginPath();
mouseX = e.clientX;
mouseY = e.clientY;
ctx.moveTo(mouseX, mouseY)
})
canvas.addEventListener("mousemove", function (e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
})
canvas.addEventListener("mouseup", function (e) {
isDrawing = false;
})
function downloadCanvas() {
var imageData = canvas.toDataURL("image/png");
let anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
anchorTag.href = imageData;
anchorTag.download = "imageData";
anchorTag.click();
document.body.removeChild(anchorTag);
}
</script>
</body>
</html>
마음에 드셨으면 좋겠고 친구들과도 공유하세요!
Reference
이 문제에 관하여(Javascript를 사용하여 서명 그림 그리기 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/imdigitalashish/create-a-web-app-to-draw-signature-and-download-it--58oe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
