вращение дуги вокруг неподвижного центра в html холсте

Я пытаюсь повернуть дугу в холсте на движение мыши, но ее не работает.вращение дуги вокруг неподвижного центра в html холсте

вот мой код:

http://jsfiddle.net/nNffu/

 var c=document.getElementById("c"); 
     var ctx=c.getContext('2d'); 
     c.width=window.innerWidth; 
     c.height=window.innerHeight; 

     var width=c.width; 
     var height=c.height; 

     draw(); 

     function draw(){ 
      var cx=width/2; 
      var cy=height/2; 

      ctx.beginPath(); 
      ctx.strokeStyle="#fff"; 
      ctx.arc(cx,cy,100,0,Math.PI); 
      ctx.stroke(); 

     } 

     document.addEventListener("mousemove",function(e){ 

      var p1=(width/2)-e.clientX; 
      var p2=(height/2)-e.clientY; 
      var angle=Math.atan2(p2, p1); 
      ctx.clearRect(0,0,width,height); 
      ctx.beginPath(); 
      ctx.strokeStyle="#fff"; 
      ctx.arc(width/2,height/2,100,0,Math.PI); 
      // ctx.translate(width/2,height/2); 
      ctx.rotate(angle); 
      //ctx.translate(0,0); 
      ctx.stroke(); 
      // ctx.restore(); 
     },false);

Оно не работал. позже я хочу добавить больше объектов, но они не должны вращаться, только этот полукруг должен быть ратифицирован в соответствии с движениями мыши. Я пробовал другие примеры с переводом, который я прокомментировал, потому что он не работает. как я могу исправить свой код, чтобы сделать это?

источник

2013-11-24 Manish

Не могли бы вы дать более ясное объяснение того, что вы хотите, чтобы это произошло? – markE

Вы хотите, чтобы полукруг вращался относительно мыши?

Вот код и Fiddle: http://jsfiddle.net/m1erickson/jJTsH/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    ctx.lineWidth=3; 
    ctx.strokeStyle="blue"; 

    var cx=canvas.width/2; 
    var cy=canvas.height/2; 
    var radius=75; 


    function drawArc(cx,cy,mouseX,mouseY){ 

     var dx=mouseX-cx; 
     var dy=mouseY-cy; 
     var angle=Math.atan2(dy,dx); 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.arc(cx,cy,radius,angle,angle+Math.PI); 
     ctx.stroke(); 

    } 

    function handleMouseMove(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     drawArc(cx,cy,mouseX,mouseY); 
    } 

    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2013-11-24 05:35:28 markE

вращение дуги вокруг неподвижного центра в html холсте

ответ

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