Drag dot around circle beyond < 0 and > 360 - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

Drag dot around circle beyond < 0 and > 360

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from www  . j av  a  2  s. c  o  m
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var fullCircle = Math.PI * 2;
var center = 200;
var last_degree = 0;
var degree = 0;
var res = 0;
$("#canvas").mousemove(function (e) {
    mouseMove(e);
});
function mouseMove(e) {
    mouseX = parseInt(e.clientX - canvasOffset.left);
    mouseY = parseInt(e.clientY - canvasOffset.top);
    var rads = Math.atan2(mouseY - center, mouseX - center);
    var x = 100 * Math.cos(rads) + center;
    var y = 100 * Math.sin(rads) + center;
    last_degree = degree;
    degree = (rads > 0 ? rads : (fullCircle + rads)) * 360 / fullCircle;
    if(degree - last_degree > 0) res+= 1;
    else res -= 1;
    $("p").text(res);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(center, center, 100, 0, center, false);
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, center, false);
    ctx.fillStyle = "black";
    ctx.fill();
}
    });

      </script> 
   </head> 
   <body> 
      <p>num</p> 
      <canvas id="canvas" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials