Union/Intersection data visualization - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

Union/Intersection data visualization

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.7.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*ww w .j a v a  2 s  .co  m*/
var ctx = $('#cv').get(0).getContext('2d');
var pi2 = Math.PI * 2;
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgba(255, 0, 0, 0.25)";
var Circle = function(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
};
var circles = [
    new Circle(100, 100, 50),
    new Circle(200, 200, 75),
    new Circle(200, 100, 25)
];
function iterate(f) {
    for(var i = 0; i < circles.length; i++) {
        f.call(circles[i], i, circles[i]);
    }
}
function draw() {
    ctx.clearRect(0, 0, 400, 400);
    iterate(function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, pi2);
        ctx.fill();
        ctx.stroke();
    });
}
var sqrt = Math.sqrt;
var selected;
function coords(e) {
    var o = $('#cv').offset(),
        x = e.pageX - o.left,
        y = e.pageY - o.top;
    return {x: x, y: y};
}
var grab;
$("#cv").mousedown(function(e) {
    var c = coords(e);
    grab = c;
    iterate(function() {
        var dx = this.x - c.x,
            dy = this.y - c.y;
        if(sqrt(dx * dx + dy * dy) < this.r) {
            selected = this;
            grab.x -= this.x;
            grab.y -= this.y;
        }
    });
}).mousemove(function(e) {
    var c = coords(e);
    if(selected) {
        selected.x = c.x - grab.x;
        selected.y = c.y - grab.y;
        draw();
    }
}).mouseup(function() {
    selected = null;
});
draw();
    });

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

Related Tutorials