Drawing a spiral on an HTML canvas using JavaScript - Javascript Canvas

Javascript examples for Canvas:Draw

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

Description

Drawing a spiral on an HTML canvas using JavaScript

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-1.6.2.js"></script> 
      <style id="compiled-css" type="text/css">

#c {//from w w  w. j  a v a2s. c o  m
   border: 1px solid #000;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var c = document.getElementById('c');
var context = c.getContext("2d");
var centerx = context.canvas.width / 2;
var centery = context.canvas.height / 2;
$('#draw').click(function() {
    a = parseFloat($('#a').val());
    b = parseFloat($('#b').val());
    context.clearRect(0, 0, 300, 300);
    context.moveTo(centerx, centery);
    context.beginPath();
    for (i = 0; i < 720; i++) {
        angle = 0.1 * i;
        x = centerx + (a + b * angle) * Math.cos(angle);
        y = centery + (a + b * angle) * Math.sin(angle);
        context.lineTo(x, y);
    }
    context.strokeStyle = "#000";
    context.stroke();
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="c" width="300" height="300"></canvas> 
      <br>
       a: 
      <input id="a" type="text" value="1"> 
      <br>
       b: 
      <input id="b" type="text" value="1"> 
      <br> 
      <button id="draw">Draw</button>  
   </body>
</html>

Related Tutorials