Wie man Zeile mit Mausereignissen rotiert

-3

Ich bin neu zu html5 und ich möchte fragen, gibt es eine Möglichkeit, mit der ich eine Linie zeichnen und drehen kann eine resizeable mit Mausereignissen auf Leinwand mit HTML5 Javascript. DankWie man Zeile mit Mausereignissen rotiert

Quelle

2012-04-07 mainajaved

Gibt es einen Weg? Ja. Gibt es viele Möglichkeiten? Auch ja. Wie weit bist du in dem, was du versuchst zu tun? Ich möchte dir keine Antwort geben, die dich glauben lässt, dass du von vorn anfangen musst ... (Außerdem bin ich mir nicht ganz sicher, ob ich verstehe, was du meinst - willst du, dass sich die Linie auf einer Leinwand dreht/verändert, Oder möchten Sie eine Leinwand drehen/in der Größe ändern? Oder beides?) – JKing

https://developer.mozilla.org/en/Canvas_tutorial http://www.html5canvastutorials.com/ – noob

@JKing Ich möchte die Linie drehen und die Größe ändern auf Leinwand .. nicht wollen, die Leinwand zu drehen. Thanks – mainajaved

Hier ist ein ziemlich verdammt einfach (aber immer noch arbeiten!) Beispiel, das bekommen sollten Sie begonnen:

<!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>

Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

Quelle

2012-04-07 10:16:22 JKing

+1 für die Mühe – undefined

@Ramerson Hah, es dauerte nur etwa eine Minute zu schreiben, aber danke trotzdem! – JKing

@JKing vielen Dank für Ihre Hilfe Ich werde das Beispiel versuchen, um es zu verstehen. Ich werde Sie fragen, ob ich weitere Fragen habe. Dank – mainajaved

Wie man Zeile mit Mausereignissen rotiert

Antwort

Verwandte Themen