html5 - Canvas algorithm to plot signatures randomly like a signed yearbook? -
i'm looking best approach plot multiple signatures randomly on page high school yearbook using canvas or svg. know of existing algorithms or open source code similar this?
did following javascript libraries? i've used both of them , work quite well: signaturepad or jsignature
both of offer fallback flash if browser doesn't support it. have chosen jsignature since overall performance on different tablets when drawing new signature better, style & api of signaturepad better.
you can record signatures example on secured admin page , plot them wherever want them.
update since want random strings , not signatures recommend you'll have @ html5 canvas – arrays , random text:
<!doctype html> <html> <head> <title>random text</title> <script type="text/javascript"> var canvas, ctx; var quotes = new array(); var img = new image(); // create new img element //or can use: //var quotes = []; function setup(){ //canvas , context setup canvas=document.getelementbyid("mycanvas"); ctx=canvas.getcontext("2d"); //create values array quotes[0]="i"; quotes[1]="think"; quotes[2]="you"; quotes[3]="always"; quotes[4]="have"; quotes[5]="regrets"; //function calls setinterval(draw,300); window.addeventlistener("keydown",checkkeyboard); } function draw(){ var randomindex = math.floor(math.random()*quotes.length); var randomcolor = math.round(math.random()*80); var randomx = math.random()*canvas.width; var randomy = math.random()*canvas.height*2-canvas.width/2; var randomsize = math.random()*30+10; ctx.fillstyle="rgba(255,255,255,0.8)"; ctx.font=randomsize+"px arial black, gadget, sans-serif"; ctx.filltext(quotes[randomindex],randomx,randomy); ctx.linewidth=1; //ctx.stroketext(quotes[randomindex],randomx,randomy); } function checkkeyboard(myevt){ if(myevt.keycode==13){ ctx.clearrect(0,0,canvas.width,canvas.height); } } </script> </head> <body onload="setup()"> <canvas id="mycanvas" width="800" height="600" style="border:1px solid; background:url(bg-hand.jpg)"></canvas> <p>press "enter" clear canvas</p> </body> </html>
Comments
Post a Comment