在HTML畫布中圍繞固定中心旋轉圓弧

我想在畫布上旋轉鼠標移動時的弧線，但它不起作用。在HTML畫布中圍繞固定中心旋轉圓弧

這裏是我的代碼：

 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

你想要一個相對鼠標旋轉的半圈嗎？

這裏是代碼和一個小提琴：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畫布中圍繞固定中心旋轉圓弧

回答

相關問題