About H5 draw the canvas to create a picture of the attention point!

1. The first one is about mobile-adaptive problems:

A: If it is the last time a canvas-generated picture, rather than the canvas that you want to draw, you do not need to consider adaptive, draw canvas when the width of the height, can be directly written to the UI provided by the size of the graph, such as the UI provides a graph is 750 * 1280, When the canvas is drawn, all the data can be

To 375*640 to calculate, fixed good can! This with the background drawing the principle of the same, we do not need to consider the self-adaptation, UI to what diagram, or we want to how big picture, we directly draw can, because the picture at the end of the scale can be scaled, the default is adaptive!

2, about H5 to draw the canvas of the multiline text, we can use the measurement width of the word line to draw text!

3, draw the picture after the completion of the text, you can solve the text at the bottom of the picture Problem!

The specific code is as follows:

/** * Draw canvas*/functionDraw (Name= ' Big Willie ', score = all, level = 1, str = ' haha haha ')) {    varc = document.getElementById ("Canvas"); varCTX = C.getcontext ("2d"); //Draw Background    varIMG =NewImage (); IMG.SRC= "Images/newbg.jpg"; Img.onload=function() {Ctx.drawimage (IMG,0, 0,375,640); //Draw Bottom TextCtx.font = "Bold normal 20px Microsoft Yahei"; Ctx.fillstyle= "BLACK"; Ctx.filltext (Name,375 * 0.18, 640 * 0.34); Ctx.font= "Bold normal 20px Microsoft Yahei"; Ctx.fillstyle= "Red"; Ctx.filltext (Score,375 * 0.63, 640 * 0.345); Ctx.fillstyle= "BLACK"; Ctx.filltext (Level,375 * 0.37, 640 * 0.458); Ctx.font= "Normal 18px Microsoft Yahei"; Ctx.fillstyle= "BLACK"; //draw multiple lines of textCanvastextautoline (str, c, 375 * 0.1, 640 * 0.5, 20);

　　　　　 var imgsrc = C.todataurl ("Image/png", 1); Note: This line is the canvas drawing of the graphics into a picture, imgsrc for the base64 format!

    };}/*str: string to draw Canvas:canvas object Initx: Draw string start X coordinate inity: Draw string start y coordinate lineheight: line height, define values yourself*/functioncanvastextautoline (str, canvas, INITX, inity, lineheight) {varCTX = Canvas.getcontext ("2d"); varLineWidth = 0; varCanvaswidth =Document.documentElement.clientWidth; varLastsubstrindex = 0;  for(Let i = 0; i < str.length; i++) {linewidth+=Ctx.measuretext (Str[i]). width; if(LineWidth > Canvaswidth * 0.8) {//subtract INITX, prevent boundary problemsCtx.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); }    }}

About H5 draw the canvas to create a picture of the attention point!