ワンライナーでパラパラ漫画作成ツール in JS

漫喫であまりに暇だったのでついカッとなって作った。

javascript:(function(d,w,h,z,f,t,u,a,n,c,o,p,m,q,i,j,s){s="n=d.createElement('canvas');with(n.style)width=n.width=w,height=n.height=h;n.setAttribute('style','position:absolute;left:0;top:0;background-color:white;border:1px solid');d.body.appendChild(n);c=n.getContext('2d');function y(p){for(i in p){m=p[i];c.beginPath();for(j in m)q=m[j],j?c.lineTo(q[0],q[1]):c.moveTo(q[0],q[1]);c.stroke();}}";eval(s);function x(){c.clearRect(0,0,w,h);c.fillStyle=c.strokeStyle='rgb(128,128,128)';t&&(c.beginPath(),c.moveTo(w-64,8),c.lineTo(w-64,32),c.lineTo(w-24,20),c.closePath(),c.fill());f>0&&y(z[f-1]);c.strokeStyle='rgb(0,0,0)';y(u=z[f]);}x();n.onmousedown=function(e){p=[e.clientX,e.clientY];a=[p];n.onmousemove=function(e){c.beginPath();c.moveTo(p[0],p[1]);o=[e.clientX,e.clientY];c.lineTo(o[0],o[1]);c.stroke();a.push(o);p=o}};n.onmouseup=function(){u.push(a);n.onmousemove=null;};d.onkeydown=function(e){e=e.which;e==39?x(z[++f]||(z[f]=[])):e==37&&f>0?x(--f):e==32?x(t=t?clearInterval(t):setInterval(function(){x(f=(f+1)%z.length)},50)):e==65||e==41?prompt('','javascript:(function(d,w,h,f,z){'+s+"setInterval(function(){c.clearRect(0,0,w,h);c.strokeStyle='"+c.strokeStyle+"';y(z[f++]);f%=z.length},50)})(document,"+w+','+h+',0,'+z.toSource()+')'):0}})(document,640,480,[[]],0,0);

Firefoxでしか確認してないのであしからず。

操作方法:

←	前のフレームに戻る
→	次のフレームに進む
SPACE	プレビュー
a	作成したアニメーションをワンライナーのJavascriptとして吐き出し