javascript - HTML5 Canvas - Create Fading Trail From Object -
so, have 2 objects, 1 should have trails after , 1 shouldn't.
here have basic setup start off with:
http://jsfiddle.net/dheff/
var obj = { // had add together random code fiddle -.- :p #ignore x: _number, y: _number, vx: _number, vy: _number, c: _string, t: _boolean } so utilize ctx.clearrect, wrong (afaik). came add together fade of alpha in each frame, http://jsfiddle.net/dheff/1/, affects both objects , affects canvas background.
is there way impact obj1 , won't impact background?
also, storing array each frames positions , angles not alternative because in original code, have animating sprites , not want trails animate -.-.
also also, in original code, canvas background image, setting fade color same background wouldn't work then.
you creating circle-with-faded-tail effect overlaying semi-transparent layers.
but circle-with-faded-tail can represented static semi-transparent image.
left: static image, right: image drawn on background image.
this static image has several advantages:
the effect not impact other drawings on canvas.
once created, static image fast draw canvas @ x,y , rotation.
the static image can overlay background image without farther pixel manipulation.
here's illustration code , demo: http://jsfiddle.net/m1erickson/k6wvf/
<!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(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var cometimage=new image(); cometimage.onload=function(){ var img=new image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg"; function start(){ ctx.fillstyle="black"; ctx.fillrect(0,0,canvas.width,canvas.height); ctx.drawimage(img,0,0); ctx.drawimage(cometimage,0,0); } } cometimage.src=cometurl(); // create semi-transparent "comet" effect (ball fading tail) // homecoming effect url can used create image. function cometurl(){ var tempcanvas=document.createelement("canvas"); var ctx=tempcanvas.getcontext("2d"); tempcanvas.width=canvas.width; tempcanvas.height=canvas.height; var cx=250; var cy=250; var r=30; var pi2=math.pi*2; ctx.fillstyle="gold"; var gradient=ctx.createlineargradient(250,250,50,50); gradient.addcolorstop(0.00,"transparent"); gradient.addcolorstop(1.00,"gold"); ctx.linewidth=40; ctx.linecap="round"; ctx.beginpath(); ctx.moveto(250,250); ctx.lineto(75,75); ctx.strokestyle=gradient; ctx.stroke(); ctx.beginpath(); ctx.arc(75,75,20,0,pi2); ctx.closepath(); ctx.fillstyle="gold"; ctx.globalalpha=0.50; ctx.fill(); ctx.globalalpha=1.00; ctx.beginpath(); ctx.arc(75,75,20,0,pi2); ctx.closepath(); ctx.fillstyle="gold"; ctx.shadowcolor="gold"; ctx.shadowblur=5; ctx.fill(); return(tempcanvas.todataurl()); } }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html> javascript html5 canvas fade
No comments:
Post a Comment