Как повернуть строку с помощью событий мыши

-3

Я новичок в html5, и я хочу спросить, есть ли способ, которым я могу нарисовать линию и заставить ее вращать с возможностью изменения размера, используя события мыши на холсте, используя html5 javascript. благодаряКак повернуть строку с помощью событий мыши

источник

2012-04-07 mainajaved

Есть ли способ? Да. Есть много способов? Также да. Как далеко вы находитесь в том, что вы пытаетесь сделать? Я не хочу давать вам ответ, который заставляет вас думать, что вам нужно начать все сначала ... (Кроме того, я не совсем уверен, что понимаю, что вы имеете в виду, - вы хотите, чтобы линия вращалась/изменялась на холсте, или вы хотите повернуть/изменить размер холста? Или оба?) – JKing

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

@JKing Я хочу повернуть и изменить размер строки на холсте .. не хочу поворачивать холст .thanks – mainajaved

Вот довольно чертовски простой (но все еще работает!) Пример, который поможет вам начать:

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

@ Raminson Hah, мне потребовалось около минуты, чтобы написать, но спасибо все равно! – JKing

@JKing благодарит много за вашу помощь. Я посмотрю на пример, попытаюсь понять это. Спросите, есть ли у меня какой-нибудь вопрос. Спасибо. – mainajaved

Как повернуть строку с помощью событий мыши

ответ

Смежные вопросы