Ray follow crosshair animation - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

Ray follow crosshair animation

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.3.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
      <style id="compiled-css" type="text/css">

html, body {
   height: 100%;
   margin:0;
   border: solid red 1px;
   cursor: url('https://i.imgur.com/qGRHc5C.png') 50 50,crosshair;
}
#clock {/*  w  w w.  j  av  a2s  .  co  m*/
   border: solid blue 1px;
   transform-origin: 50% 50%;
}
.seconds-container {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border: solid purple 1px;
   transform-origin: 50% 80%;
}
.seconds {
   background: #000;
   top:50%;
   left: 50%;
   position: absolute;
   transform-origin: 50% 0%;
   width: 1%;
   z-index: 8;
   border: solid yellow 1px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
(function() {
  var body = document.body,
      html = document.documentElement;
  var height = Math.max( body.scrollHeight, body.offsetHeight,
                         html.clientHeight, html.scrollHeight, html.offsetHeight );
  var width = Math.max( body.scrollWidth, body.offsetWidth,
                         html.clientWidth, html.scrollWidth, html.offsetWidth );
  zerox = document.body.clientWidth/2;
  zeroy = document.body.clientHeight/2;
  document.body.addEventListener("mousemove", function(event) {
    drawRay(event);
  });
  function drawRay(e) {
      var x = e.clientX;
      var y = e.clientY;
      var coor = "Coordinates: (" + x + "," + y + ")";
      var distance = Math.sqrt(  ( (x-zerox)*(x-zerox) )  + ( (y-zeroy)*(y-zeroy) ) );
      xMid = (x+zerox)/2;
      yMid = (y+zeroy)/2;
      salopeInRadian = Math.atan2(y-zeroy, x-zerox);
      salopeInRadian = -90+(salopeInRadian * 180) / Math.PI;
      lineID = 'seconds';
      line = document.getElementById(lineID);
      line.style.height = distance + "px";
      line.style.transform = "rotate("+salopeInRadian+"deg)";
  }
})();
var c = document.getElementById("gameCanvas");
      var ctx = c.getContext("2d");
      // Create gradient
      var grd = ctx.createLinearGradient(0, 0, 1663, 0);
      grd.addColorStop(0,"red");
      grd.addColorStop(1,"white");
      // Fill with gradient
      ctx.fillStyle = grd;
      ctx.fillRect(0,0,1663,1052);
    });

      </script> 
   </head> 
   <body id="bo">  
      <canvas id="gameCanvas" width="1663" height="1052" style="border:1px double #d3d3d3;"></canvas> 
      <article class="clock" id="clock"> 
         <div class="seconds-container" id="seconds-container"> 
            <div class="seconds" id="seconds"></div> 
         </div> 
      </article>   
   </body>
</html>

Related Tutorials