Canvas text wrap, rounded rectangles, create pictures phone long press Save

Canvas's text wrap function encapsulation

//str: The string to draw//Canvas:canvas Object//INITX: Draw string start X coordinate//Inity: Draw the starting y-coordinate of a string//lineheight: line height, you can define a value            functionCanvastextautoline (str,canvas,initx,inity,lineheight) {varCTX = Canvas.getcontext ("2d"); varLineWidth = 0; varCanvaswidth =Canvas.width; varlastsubstrindex= 0;  for(Let i=0;i<str.length;i++) {linewidth+=Ctx.measuretext (Str[i]). width; //subtract INITX, prevent boundary problems                    if(linewidth>canvaswidth-initx*2.3) {Ctx.filltext (str.substring (lastsubstrindex,i), initx,inity); Inity+=lineheight; LineWidth=0; Lastsubstrindex=i; }                     if(i==str.length-1) {Ctx.filltext (str.substring (lastsubstrindex,i+1), initx,inity); }                }          }

Vanvas function Encapsulation of rounded rectangles

//a function of the encapsulated rectangle used for drawing rounded corners.            functionRoundedrect (x,y,width,height,radius,color,type) {varctx= This. CTX;              Ctx.beginpath (); Ctx.moveto (x, y+radius); Ctx.lineto (x, y+height-radius); Ctx.quadraticcurveto (x, y+height,x+radius,y+height); Ctx.lineto (x+width-radius,y+height); Ctx.quadraticcurveto (x+width,y+height,x+width,y+height-radius); Ctx.lineto (x+width,y+radius); Ctx.quadraticcurveto (x+width,y,x+width-radius,y); Ctx.lineto (x+radius,y); Ctx.quadraticcurveto (X,y,x,y+radius); Ctx[type+ ' Style '] =color;              Ctx.closepath ();            Ctx[type] (); }

Directly in the HTML with a canvas picture, on the mobile phone is not able to achieve direct long press saved to the album. Here is a way to do this: the canvas to make a good diagram into a link, the introduction of the IMG, canvas hidden, so that the canvas to achieve the long press to save the picture. Here, record a process encountered problems, directly with the design draft size to define the size of the canvas, if the size is too large, the phone open (just say that the canvas picture is not processed by any processing) will appear to be open, only manual scaling to normal display. Encounter this problem, try to zoom the canvas, not so, and finally through the above method to solve.

Canvas export bit picture

var canvas = document.getElementById (' MyCanvas '); var urlimg=canvas.todataurl (' image/png ', 0.92);d Ocument.getelementbyid ("test"). src = urlimg;

Canvas text wrap, rounded rectangles, create pictures phone long press Save