如何使用鼠標事件旋轉線

-3

我是新來的HTML5，我想問是否有一種方法，我可以畫一條線，並使其使用html5 javascript在畫布上旋轉可調整大小的鼠標事件。感謝如何使用鼠標事件旋轉線

2012-04-07 mainajaved

有沒有辦法？是。有很多方法嗎？也是。你在多大程度上想要做什麼？我不想給你一個答案，讓你覺得你需要重新開始......（另外，我並不完全相信我明白你的意思 - 你是否希望線條在畫布上旋轉/調整大小，或者你想旋轉/調整畫布？或者兩者兼而有之？） – JKing 2012-04-07 09:25:36

https://developer.mozilla.org/en/Canvas_tutorial http://www.html5canvastutorials.com/ – noob 2012-04-07 09:29:14

@JKing我想旋轉並調整行大小在畫布上..不想旋轉畫布。謝謝 – mainajaved 2012-04-07 09:44:45

這裏是一個非常簡單的該死的（但仍然工作！）的例子，應該讓你開始：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.addEventListener("load",function() { 
       //set a reference to the canvas element 
       var canv = document.querySelector("canvas"); 

       //set its width and height to fill the window 
       canv.setAttribute("width", window.innerWidth+"px"); 
       canv.setAttribute("height",window.innerHeight+"px"); 

       //set a reference to the canvas' 2d drawing context 
       var ctx = canv.getContext('2d'); 

       //now set up the eventListener 
       window.addEventListener("mousemove", function(e) { 

        //first clear canvas 
        ctx.moveTo(0,0); 
        ctx.clearRect(0,0,window.innerWidth,window.innerHeight); 

        //move the "pointer" to the middle of the canvas 
        ctx.beginPath(); 
        ctx.moveTo(window.innerWidth/2,window.innerHeight/2); 

        //tell it to draw a line from there to the mouse coords 
        ctx.lineTo(e.x,e.y); 
        ctx.stroke(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <canvas></canvas> 
    </body> 
</html>

讓我知道，如果您有任何進一步的問題。

來源

2012-04-07 10:16:22 JKing

努力爲+1 – undefined 2012-04-07 10:25:40

@Raminson Hah，我只花了大約一分鐘的時間寫下來，但都是一樣的感謝！ – JKing 2012-04-07 10:32:51

@JKing非常感謝你的幫助我會看看這個例子，試着去理解它。請問你是否有任何進一步的問題。謝謝 – mainajaved 2012-04-07 10:40:51

如何使用鼠標事件旋轉線

回答

相關問題