<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var ballColor = "#0000ff";

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,20);
}

function draw()
{
  context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle=ballColor;
  // Draws a circle of radius 20 at the coordinates x,y on the canvas
  context.arc(x,y,20,0,Math.PI*2,true);
  context.closePath();
  context.fill();
  // Boundary Logic
  if( x<0 || x>300) {
  	dx=-dx;
  	ballColor = getRandomColor();
  }
  if( y<0 || y>300)  {
    dy=-dy;
    ballColor = getRandomColor();
  }
  x+=dx;
  y+=dy;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
Topic revision: r1 - 2017-04-24 - JimSkon
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback