¿Dibujar una línea con dos clics del mouse en el lienzo de HTML5?

¿Cómo se dibuja una línea con dos clics del mouse en el lienzo?¿Dibujar una línea con dos clics del mouse en el lienzo de HTML5?

Fuente

2011-05-17 Resier

El código es bastante simple, pero hay que tener una buena base:

demostración: http://jsfiddle.net/NpDdt/10/

JavaScript:

var clicks = 0; 
var lastClick = [0, 0]; 

document.getElementById('canvas').addEventListener('click', drawLine, false); 

function getCursorPosition(e) { 
    var x; 
    var y; 

    if (e.pageX != undefined && e.pageY != undefined) { 
     x = e.pageX; 
     y = e.pageY; 
    } else { 
     x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    return [x, y]; 
} 

function drawLine(e) { 
    context = this.getContext('2d'); 

    x = getCursorPosition(e)[0] - this.offsetLeft; 
    y = getCursorPosition(e)[1] - this.offsetTop; 

    if (clicks != 1) { 
     clicks++; 
    } else { 
     context.beginPath(); 
     context.moveTo(lastClick[0], lastClick[1]); 
     context.lineTo(x, y, 6); 

     context.strokeStyle = '#000000'; 
     context.stroke(); 

     clicks = 0; 
    } 

    lastClick = [x, y]; 
};

Fuente

2011-05-17 19:32:14 Blender

Esto sería aún mejor si mostrara la línea después del primer clic para darle al usuario algún comentario visual –

@MichaelBellamy aquí hay un mouseup mousedown que se puede arrastrar uno que tiene comentarios de los usuarios http://codepen.io/caleboleary/pen/PWMVOg Gracias por un punto de partida Blender –

@ CalebO'Leary dang, muy limpio! – moeiscool

Aquí está un ejemplo completo, basado en el ejemplo W3Schools en http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script> 

      $(function(){ 

       var point1 = new Array(); 
       point1['x'] = false; 
       point1['y'] = false; 
       var point2 = new Array(); 
       point2['x'] = false; 
       point2['y'] = false; 

       var c=document.getElementById("myCanvas"); 
       var cxt=c.getContext("2d"); 

       $(document).click(function(e){ 
        if (false === point1['x'] || false === point1['y']) { 
         point1['x'] = e.pageX; 
         point1['y'] = e.pageY; 
         return; 
        } 
        else if (false === point2['x'] || false === point2['y']) { 
         point2['x'] = e.pageX; 
         point2['y'] = e.pageY; 

         console.log("second"); 

         cxt.moveTo(point1['x'], point1['y']); 
         cxt.lineTo(point2['x'], point2['y']); 
         cxt.stroke(); 

        } 


       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas id="myCanvas" width="200" height="200" style="border: 1px solid #000">Your browser does not support the canvas element.</canvas> 
    </body> 
</html>

Fuente

2011-05-17 19:22:56

¿Dibujar una línea con dos clics del mouse en el lienzo de HTML5?

Respuesta

Cuestiones relacionadas