nehhon Development

nehCanvas BETA

Draw animations or scenes easily in seconds!

Using our canvas HTML5 Creator

Example


<!doctype html>
<html>
<body>
<canvas id="special"></canvas>

<script src="nehCanvas.js"></script>
<script>

//Animation info
anim1 = '70,180,30,71,231,48,0.2,2693,71,180,30,71,231,48,0.2,118,77,186,30,71,231,48,0.2,9,82,195,30,71,231,48,0.2,13,92,210,30,71,231,48,0.2,17,103,224,30,71,231,48,0.2,16,113,239,30,71,231,48,0.2,16,120,250,30,71,231,48,0.2,17,124,255,30,71,231,48,0.2,17,127,260,30,71,231,48,0.2,16,128,262,30,71,231,48,0.2,17,129,264,30,71,231,48,0.2,17,130,264,30,71,231,48,0.2,16,131,264,30,71,231,48,0.2,129,132,264,30,71,231,48,0.2,20,135,259,30,71,231,48,0.2,8,141,250,30,71,231,48,0.2,11,154,233,30,71,231,48,0.2,15,167,214,30,71,231,48,0.2,17,181,194,30,71,231,48,0.2,17,195,178,30,71,231,48,0.2,16,211,158,30,71,231,48,0.2,17,228,143,30,71,231,48,0.2,17,247,129,30,71,231,48,0.2,17,265,117,30,71,231,48,0.2,17,280,107,30,71,231,48,0.2,17,288,103,30,71,231,48,0.2,16,291,100,30,71,231,48,0.2,16';

//Settings
var canvas = document.getElementById("special");
var ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 800;

//nehCanvas settings
NEHrepeat = true;
NEHautoclean = true;

//Animate
NEHanimate(anim1,ctx);

</script>

</body>
</html>

Download

Or copy the compressed code


<script>
function drw(a,o,r,t,n){var e=a[r];o.beginPath(),o.arc(e.x,e.y,e.r,0,2*Math.PI),o.fillStyle="rgba("+e.c+")",o.fill(),r++,t>r?setTimeout(function(){drw(a,o,r,t,n)},a[r].d*n):1==NEHrepeat&&(drw(a,o,0,t,n),1==NEHautoclean&&o.clearRect(0,0,window.innerWidth,window.innerHeight))}function drwR(a,o,r,t,n){var e=a[r];o.beginPath(),o.arc(e.x,e.y,e.r,0,2*Math.PI),o.fillStyle="rgba("+e.c+")",o.fill(),r++,t>r?setTimeout(function(){drwR(a,o,r,t,n)},n):1==NEHrepeat&&(drwR(a,o,0,t,n),1==NEHautoclean&&o.clearRect(0,0,window.innerWidth,window.innerHeight))}function NEHanimate(a,b,c,d){a=a.split(",");var s="",o=0;for(s="{x:"+a[o]+",y:"+a[o+1]+",r:"+a[o+2]+',c:"'+a[o+3]+","+a[o+4]+","+a[o+5]+","+a[o+6]+'",d:'+a[o+7]+"}",o=8;o<a.length;o+=8)s+=",{x:"+a[o]+",y:"+a[o+1]+",r:"+a[o+2]+',c:"'+a[o+3]+","+a[o+4]+","+a[o+5]+","+a[o+6]+'",d:'+a[o+7]+"}";s="["+s+"]",eval("a ="+s),"regular"!=d?null==c?drw(a,b,0,a.length,1):drw(a,b,0,a.length,c):drwR(a,b,0,a.length,c)}function NEHdraw(a,b){a=a.split(",");var s="",o=0;for(s="{x:"+a[o]+",y:"+a[o+1]+",r:"+a[o+2]+',c:"'+a[o+3]+","+a[o+4]+","+a[o+5]+","+a[o+6]+'",d:'+a[o+7]+"}",o=8;o<a.length;o+=8)s+=",{x:"+a[o]+",y:"+a[o+1]+",r:"+a[o+2]+',c:"'+a[o+3]+","+a[o+4]+","+a[o+5]+","+a[o+6]+'",d:'+a[o+7]+"}";for(s="["+s+"]",eval("a ="+s),i=0;i<a.length;i++){var u=a[i];b.beginPath(),b.arc(u.x,u.y,u.r,0,2*Math.PI),b.fillStyle="rgba("+u.c+")",b.fill()}}
</script>

Functions()


NEHanimate(anim1,ctx); //Reproduce the animation with the real time

NEHanimate(anim1,ctx,5); //Reproduce the animation with the real time x5

NEHanimate(anim1,ctx,16,"regular"); //Draw points each 16ms

NEHdraw(anim1,ctx); //Draw directly without animation