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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.