在HTML5畫布上點擊兩次鼠標畫一條線？

的代碼非常簡單W3Schools的例子，但你必須得到一個良好的基礎：

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]; 
};

來源

2011-05-17 19:32:14 Blender

這會更好，如果它顯示的行後第一次點擊給用戶一些視覺反饋 – 2016-12-02 16:19:28

@MichaelBellamy這是一個mouseup mousedown可拖動的用戶反饋http://codepen.io/caleboleary/pen/PWMVOg感謝一個出發點Blender – 2017-02-21 20:42:33

@ CalebO'Leary當然，很乾淨！ – moeiscool 2017-03-23 23:54:41

下面是一個完整的例子，基於在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>

來源

2011-05-17 19:22:56

在HTML5畫布上點擊兩次鼠標畫一條線？

回答

相關問題