Wednesday, June 13, 2012

Draw a circle in HTML5 canvas and mouse over event using jQuery

<!-- Author:    Binyas
     Website:   www.softinker.com
     Blog:      softinker.blogspot.com -->

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { margin: 0px; overflow: hidden; } canvas {         border: 1px solid #9C9898;       } </style> <!--Use:for adding canvas to ie download excanvas from: http://code.google.com/p/explorercanvas/ --> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <canvas id="myCanvas" width="300" height="350"> your browser does not support the canvas tag </canvas> <div id="result"></div> <script type="text/javascript"> // use requestAnimFrame for better and smooth animation window.requestAnimFrame = (function(callback){     return window.requestAnimationFrame ||     window.webkitRequestAnimationFrame ||     window.mozRequestAnimationFrame ||     window.oRequestAnimationFrame ||     window.msRequestAnimationFrame ||     function(callback){         window.setTimeout(callback, 1000 / 60);     }; })(); function animate(lastTime){           var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d");         // update         var date = new Date();         var time = date.getTime();         var timeDiff = time - lastTime;         var linearSpeed = 100;         // pixels / second         var linearDistEachFrame = linearSpeed * timeDiff / 1000;                 lastTime = time;         // clear         context.clearRect(0, 0, canvas.width, canvas.height);         // draw  draw(context);         // request new frame         requestAnimFrame(function(){             animate(lastTime);         });   } var radius=100; var x=150; var y=150; var color="#ff0000"; window.onload = function() {     var canvas = document.getElementById("myCanvas");     var ctx = canvas.getContext("2d");     ctx.clearRect(0, 0, canvas.width, canvas.height);     var date = new Date();     var time = date.getTime();     animate(time); }; function draw(ctx) { ctx.fillStyle=color; ctx.strokeStyle=color; ctx.beginPath(); ctx.arc(x,y,radius,0,2*Math.PI); ctx.closePath(); ctx.fill(); ctx.stroke(); } (function($) { var myctx = $("#myCanvas");       myctx.mousemove(function(e) { //get current mouse pos var mouseX=e.pageX - this.offsetLeft; var mouseY=e.pageY - this.offsetTop; /*logic: if the distance of current mouse position from centre of the circle is lessthan its radius then mouse pointer is in the circle */ var distance=Math.sqrt(Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2));//distance formula sqrt((x1-x2)^2+(y1-y2)^2) if (distance <= radius) { $("#result").text("IN"); } else { $("#result").text("OUT"); } }); })(jQuery); </script> </body> </html>
Logic: if the distance of current mouse position from centre of the circle is lessthan its radius then mouse pointer is in the circle.

Works Perfectly

pls put comments ..

No comments:

Post a Comment