JavaScript and HTML5 canvas create round Stamps

Code:

functionCreateseal (id,company,name) {varCanvas =document.getElementById (ID); varcontext = Canvas.getcontext (' 2d '); //draw a seal border    varWIDTH=CANVAS.WIDTH/2;varHEIGHT=CANVAS.HEIGHT/2; Context.linewidth=7; Context.strokestyle= "#f00";    Context.beginpath (); Context.arc (Width,height,110,0,math.pi*2);    Context.stroke (); //Draw a PentagramCreate5star (context,width,height,30, "#f00", 0); //draw name of sealContext.font = ' 22px Helvetica '; Context.textbaseline= ' Middle ';//set the vertical alignment of textcontext.textalign = ' center ';//set the horizontal alignment of textContext.linewidth=1; Context.fillstyle= ' #f00 '; Context.filltext (Name,width,height+65); //Drawing seal UnitsContext.translate (Width,height);//pan to this position,Context.font = ' 30px Helvetica 'varCount = Company.length;//Word Count    varAngle = 4*math.pi/(count-1);//inter-word anglevarchars = Company.split (""); varC;  for(vari = 0; I < count; i++) {C= Chars[i];//characters that need to be drawn        if(i==0) Context.rotate (5*MATH.PI/6);Elsecontext.rotate (angle);         Context.save (); Context.translate (90, 0);//pan to this position, when the word and X axis are perpendicularContext.rotate (MATH.PI/2);//rotate 90 degrees to make the word parallel to the x-axis context.filltext (c,0, 5);//this point is the center point of the wordContext.restore (); }    //Draw Pentagram    /** Create a Pentagram shape. The center coordinate of the pentagram is (Sx,sy), and the distance from center to vertex is radius,rotate=0 when a vertex is on the axis of symmetry * rotate: Rotates rotate radians around the axis of symmetry*/      functionCreate5star (Context,sx,sy,radius,color,rotato) {context.save (); Context.fillstyle=color; Context.translate (sx,sy);//move coordinate OriginContext.rotate (Math.pi+rotato);//RotateContext.beginpath ();//Create Path        varx = Math.sin (0); varY= Math.Cos (0); varDig = MATH.PI/5; for(vari = 0;i< 5;i++) {//draw five sides of a pentagram         varx = Math.sin (i*dig); vary = Math.Cos (i*dig); Context.lineto (x*radius,y*radius);          } context.closepath ();          Context.stroke ();          Context.fill ();      Context.restore (); }}

Mount element:

<id= "Canvas"  width= " +" height= " +" ></canvas>

Call:

Createseal (' canvas ', ' Jiangxi province Chen Shang Technology Co., Ltd. ', ' Test special chapter ');

Effect:

Get Picture Base64:

document.getElementById (' canvas '). Todataurl ("Image/png");

If you need to save PHP to the server, you can refer to the following code:

$str $_post [' base64 ']; Preg_match $str $result ); $str Str_replace ($result$str); file_put_contents (' A.png ',base64_decode($str));

The core of the code to find the online, their own processing a bit.

JavaScript and HTML5 canvas create round Stamps