Método de aplicación del dibujo lineal de banda elástica de lienzo

El dibujo con los dedos puede estirarse como una banda elástica. .

Un ejemplo es el siguiente: point_down:

La idea es muy simple. Solo necesita prestar atención a la función de dibujo de la banda elástica. A continuación se resumen las ideas de las tres etapas de mousedown, mousemove y mouseup.

mousedown: registra la posición inicial, arrastrar (registra si está en un estado de arrastre) se establece en verdadero, getImageData ( 橡皮筋效果关键1 )

mousemove: obtiene la posición pos al arrastrar, putImageData ( 对应getImageData，橡皮筋效果关键2 ), dibuja una línea recta según pos y comienza

mouseup: arrastrar vuelve a ser falso

关键está en los dos métodos de lienzo putImageData() y getImageData(). putImageData() registra la imagen cuando se hace clic con el mouse y getImageData() la restaura en consecuencia. Si estos dos métodos no se ejecutan, se producirán los siguientes efectos:

putImageData() equivale a borrar todas las líneas escaneadas

código

 <canvas id=canvas width=600 height=400 style=border: 1px negro sólido;> </canvas> <script type=text/javascript> let canvas = document.getElementById('canvas'), ctx = canvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect() obtiene la posición del elemento canvasTop = canvas.getBoundingClientRect().top; let imageData; //Registrar datos de la imagen let start = new Map([['x',null],['y',null]]); En el estado de arrastre canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop); pos.y); arrastrar = verdadero; //Registrar datos de imagen imageData = ctx.getImageData(0,0,canvas.width,canvas.height } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //Equivalente a borrar todas las líneas escaneadas y volver a dibujar ctx.putImageData(imageData, 0, 0; ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ; } } canvas.onmouseup = function (e) { drag = false } function positionInCanvas (e, canvasLeft, canvasTop) {// Obtener la posición del clic del mouse en el lienzo return { x:e.clientX - lienzoLeft, y:e.clientY - lienzoTop } } </script>

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.