최근에는 모바일 터치 이벤트와 캔버스 선 그리기 기능을 결합한 시그니처 기능을 주로 개발하고 있다.
js 부분은 다음과 같습니다.
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas),//캔버스의 상위 div 그리기clearEl: document.getElementById(clearCanvas),//지우기 버튼 saveEl: document.getElementById(saveCanvas) ,//저장 버튼// 선폭:1,//선 두께, 선택 사항// 색상:검정색,//선 색상, 선택 사항// background:#ffffff//라인 배경, 선택 사항});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; this.Background = #ffffff for (var i in obj) [i] = obj[i] }; this.canvas = document.createElement(canvas); this.el.appendChild(this.canvas); = this.canvas.getContext(2d); this.canvas.width = this.el.clientWidth; this.el.clientHeight = this.cxt.fillRect( 0, 0, this.canvas.width, this.canvas.width) this.cxt.StrokeStyle = this.color; this.cxt.lineWidth = this.linewidth; this.cxt.lineCap = round; //그리기 시작 this.canvas.addEventListener(touchstart, function(e) { this.cxt.beginPath(); this.cxt.moveTo(e .changedTouches[0].pageX, e.changedTouches[0].pageY) }.bind(this), false); //그리기 this.canvas.addEventListener(touchmove, function(e) { this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.cxt.Stroke(); } .bind(this), false); //그리기 종료 this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(this), false); //캔버스 지우기 this.clearEl.addEventListener(click, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //이미지를 저장하고 base64로 직접 전송 this.saveEl.addEventListener(click, function() { var imgBase64 = this.canvas.toDataURL(); console.log(imgBase64) }.bind(this), false);};렌더링은 다음과 같습니다.
HTML과 CSS를 첨부하세요.
<div id=canvas> <p id=clearCanvas>지우기</p> <p id=saveCanvas>저장</p></div>html,body{ width: 100%;}#canvas{ 너비: 100%; 높이: 100%; 위치: 상대;}#canvas 캔버스{ 디스플레이: 블록;}#clearCanvas{ 너비: 50% 높이: 40px; line-height: 40px; 텍스트 정렬: 위치: 절대; 하단: 0; 테두리: 1px z-index: 1;}#saveCanvas{ 너비: 50%; 줄 높이: 40px; 텍스트 정렬: 중앙; 하단: 0; 테두리: 1px Z-색인: 1;}위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.