I am trying to rotate arc in canvas on mouse movement, but its not working.
here is my code:
/
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);
It didnt worked. later i want to add more objects but they should not rotate only this semicircle should be in ratation as per mouse movements. i tried other examples with translation which i have mented because it's not working. how can i fix my code to do so?
I am trying to rotate arc in canvas on mouse movement, but its not working.
here is my code:
http://jsfiddle/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);
It didnt worked. later i want to add more objects but they should not rotate only this semicircle should be in ratation as per mouse movements. i tried other examples with translation which i have mented because it's not working. how can i fix my code to do so?
Share Improve this question edited Nov 24, 2013 at 4:38 Manish asked Nov 24, 2013 at 4:31 ManishManish 1051 gold badge3 silver badges10 bronze badges 1- Could you give a clearer explanation of what you want to happen? – markE Commented Nov 24, 2013 at 5:24
1 Answer
Reset to default 5Do you want a half-circle that rotates in relation to the mouse?
Here is code and a Fiddle: http://jsfiddle/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./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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744871037a4598261.html
评论列表（0条）