Draw disorganised bubble - Javascript Canvas

Javascript examples for Canvas:Draw

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

Description

Draw disorganised bubble

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.4.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*w ww.  j a v  a 2s.  com*/
var circle = $('#circles').get(0).getContext('2d');
var circles = [
    { x:  50, y:  50, r: 25, c: "#78BA00" },
    { x: 80, y:  100, r: 35, c: "#F4B300" },
    { x: 150, y: 170, r: 15, c: "#78BA00" },
    { x:  50, y: 220, r: 20, c: "#F4B300" },
    { x:  60, y: 150, r: 10, c: "#78BA00" },
    { x: 70, y: 170, r: 15, c: "#F4B300" },
    { x:  110, y: 220, r: 16, c: "#78BA00" },
    { x:  130, y: 150, r: 7, c: "#F4B300" },
    { x:  60, y: 150, r: 11, c: "#78BA00" },
    { x: 70, y: 170, r: 12, c: "#F4B300" },
    { x:  110, y: 30, r: 21, c: "#78BA00" },
    { x:  180, y: 60, r: 8, c: "#F4B300" },
    { x:  70, y: 90, r: 21, c: "#78BA00" },
    { x:  220, y: 110, r: 17, c: "#F4B300" }
];
function drawCircle(data) {
    circle.beginPath();
    circle.arc(data.x, data.y, data.r, 0, Math.PI * 2);
    circle.fillStyle = data.c;
    circle.fill();
}
$.each(circles, function() {
    drawCircle(this);
});
    });

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

Related Tutorials