손가락 그리기는 고무줄처럼 늘어날 수 있습니다. .
예는 다음과 같습니다:
아이디어아이디어는 매우 간단합니다. 다음은 mousedown, mousemove 및 mouseup의 세 단계에 대한 아이디어를 요약한 것입니다.
mousedown: 시작 위치를 기록하고, 드래그(드래깅 상태인지 기록)를 true로 설정하고, getImageData( 橡皮筋效果关键1 )
mousemove: 드래그할 때 위치 위치를 가져오고, putImageData( 对应getImageData，橡皮筋效果关键2 ), 위치에 따라 직선을 그리고 시작합니다.
mouseup:드래그하면 false로 되돌아갑니다.
关键두 개의 캔버스 메소드 putImageData() 및 getImageData()에 있습니다. putImageData()는 마우스를 클릭할 때 이미지를 기록하고 그에 따라 getImageData()가 이를 복원합니다. 이 두 가지 방법을 실행하지 않으면 다음과 같은 효과가 발생합니다.
putImageData()는 스캔한 모든 라인을 지우는 것과 같습니다.
암호
<canvas id=canvas width=600 height=400 style=border: 1px solid black;> </canvas> <script type=text/javascript> let canvas = document.getElementById('canvas'), ctx = canvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect()는 요소 위치를 가져옵니다. canvasTop = canvas.getBoundingClientRect().top; //이미지 데이터 기록 let start = new Map([['x',null],['y',null]]); 드래그 상태에서 canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop) start.set('x', pos.x); pos.y); drag = true; //이미지 데이터 기록 imageData = ctx.getImageData(0,0,canvas.width,canvas.height) } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //스캔한 선을 모두 지우고 다시 그리는 것과 같습니다. ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')) ctx.lineTo(pos.x, pos.y); ; } } canvas.onmouseup = function (e) { drag = false } function positionInCanvas (e, canvasLeft, canvasTop) {//캔버스에서 마우스 클릭 위치 가져오기 return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.