jquery - Issue Adding Mouse Hover Animation to HTML5 Canvas Drawings -
could please take @ this demo , let me know how add css animation drawing via css3 or jquery? want make circle bigger or change background color on mouseover.
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #d3d3d3;">your browser not support html5 canvas tag.</canvas> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.beginpath(); ctx.arc(95, 50, 20, 0, 2 * math.pi); ctx.fillstyle = "#ff8c00"; ctx.fill(); ctx.linewidth = 4; ctx.strokestyle = '#2d2d2d'; ctx.stroke(); this tried:
ctx.hover( function() { ctx.animate({ fillstyle: 'yellow' }, 300); }, function() { ctx.animate({ fillstyle: 'red' }, 300); } ); but didn't work! thanks.
you can't control html canvas drawings either css or jquery.
dom elements can trigger events on hover because objects , browser knows position , tracking mouse you.
unlike dom elements, canvas drawings pixels on canvas--not objects. after drawn, browser not track pixels , pixels cannot trigger events.
what typically done "simulate" hover behavior in canvas drawings using javascript.
listen mousemove events on canvas.
in mousemove handler, calculate if mouse inside circle.
if mouse has changed outside-circle inside-circle simulate hover.
if mouse has changed inside-circle outside-circle simulate blur.
since canvas drawings pixels, change way drawing looks must erase pixels , redraw desired effect. in case:
on simulated hover:
erase canvas
redraw circle larger or recolored fill
on simulated blur:
erase canvas
redraw circle original size , fill
and if want animate drawing on html canvas, must manually javascript:
change circles properties incrementally (slightly increased size or changed color);
erase canvas.
draw circle in new incrementally changed state.
repeat @ #1 until animation complete.
hint: using requestanimationframe gives high performance animations. r.a.f. lets create animation loops coordinated browser refreshes give performance.
example code , demo: http://jsfiddle.net/m1erickson/h3hc7/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } #canvas{border:1px solid red;} </style> <script> $(function(){ // canvas related variables var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var $canvas=$("#canvas"); var canvasoffset=$canvas.offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; var scrollx=$canvas.scrollleft(); var scrolly=$canvas.scrolltop(); // create object represents circle var circle={ cx:95, cy:50, radius:20, blurcolor:"#ff8c00", hovercolor:"red", wasinside:false, } // draw circle on canvas first time drawcircle(circle,false); // draw circle on canvas in color represents hover state function drawcircle(circle,isinside){ ctx.beginpath(); ctx.arc(circle.cx,circle.cy,circle.radius, 0, 2 * math.pi); ctx.fillstyle = isinside ? circle.hovercolor : circle.blurcolor; ctx.fill(); ctx.linewidth = 4; ctx.strokestyle = '#2d2d2d'; ctx.stroke(); // save hover status of circle circle.wasinside=isinside; } function handlemousemove(e){ // tell browser we're handling event e.preventdefault(); e.stoppropagation(); // calculate mouse position var mousex=parseint(e.clientx-offsetx); var mousey=parseint(e.clienty-offsety); // calculate if mouse inside circle var dx=mousex-circle.cx; var dy=mousey-circle.cy; var isinside=dx*dx+dy*dy<=circle.radius*circle.radius; // if mouse has either entered or exited circle // erase , redraw circle reflect current // hover state if( isinside && !circle.wasinside ){ ctx.clearrect(0,0,canvas.width,canvas.height); drawcircle(circle,isinside); }else if( !isinside && circle.wasinside ){ ctx.clearrect(0,0,canvas.width,canvas.height); drawcircle(circle,isinside); } } // listen mousemove events $("#canvas").mousemove(function(e){handlemousemove(e);}); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>
Comments
Post a Comment