Move circle in canvas based on range slider value in javascript - Javascript Canvas

Javascript examples for Canvas:Circle

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

Description

Move circle in canvas based on range slider value in javascript

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//from w w w  .  ja v  a2s .  co m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=8;
    ctx.strokeStyle='blue';
    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var radius=50;
    draw(0);
    var $percent=$('#percent');
    $percent.on('change',function(){
        draw(parseInt($percent.val()));
    });
    function draw(x){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx+x,cy,radius,0,PI2);
        ctx.closePath();
        ctx.stroke();
        console.log(cx+x);
    }
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <input type="range" id="percent" min="-50" value="0" max="50" step="1">
      <br> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials