html 캔버스에서 고정 된 중심을 중심으로 호를 회전합니다.

마우스 동작시 캔버스에서 호를 회전하려고하지만 작동하지 않습니다. 그것은 일을 didnt한다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 캔버스에서 고정 된 중심을 중심으로 호를 회전합니다.

답변

관련 문제