Canvas development examples and precautions for micro-credit program _android

Micro-Letter Applet Wxcanvas

Test phone for IPHONE6, developer tool version 0.10.102800. Developer Tools 0.11.112301 version is the same

Micro-Letter Applet in the canvas H5 canvas have a lot of different places, the following is the micro-mail program canvas called Wxcanvas

Here are all the dry goods I have tested a little bit, patience to see:

1.wxcanvas, unlike H5canvas, has the width and Height properties and the style style of width and height. He only has style, can be understood as he is a box bar;

2.wxcanvas not as a real h5canvas, as it is a div on the line, draw the scope of things also exist, change the width,height is displayed, or there is redraw, but the specific how to achieve do not know;

3. Change the Wxcanvas style of the width,height, not to the original canvas of the size of things;

The size of the original canvas is not changed by the scaling in the 4.css transform transform.

5. Official saying: The context is simply a container for recording method calls, which is used to generate an action array that records the behavior of the drawing. There is no corresponding relationship between the context and <canvas/>, and a graph of the drawing action of the creation canvas can be applied to more than one <canvas/>.

In fact, after Context.getactions (), the information in the context is emptied, and if you want to reuse it, you need Var temp=context.getactions () to save the array of operations to be reused for Wx.drawcanvas.

6. Note

Wx.drawcanvas ({
canvasid: ' Target ',
actions:context.getActions ()
});

The default will be to empty the canvas, do not want to empty

Wx.drawcanvas ({
  canvasid: ' Target ',
  actions:context.getActions (),
  reserve:true
});

7. "Focus"

<canvas disable-scroll= "true" catchtouchmove= "Ccvsmove" bindtouchmove= "Cvsmove" canvas-id= "target" id= "target" Style= ' width:{{width}}px;height:{{height}}px ' ></canvas>

Note that disable-scroll= "true" and bindtouchmove= "Cvsmove" exist at the same time to prevent the page from moving, Catchtouchmove is not possible

The above wording, Ccvsmove and Cvsmove will all trigger,

Ccvsmove return is the ordinary Touch event object, have Pagex,clientx etc,

Cvsmove return is Canvastouch event object, no Pagex,clientx, only x,y

8.

Wx.drawcanvas ({
  canvasid: ' target ',
  actions: [],
  reserve:false
});

You can empty the state of the canvas and canvas

9. The scale of the canvas tranlate rotate and so on, and then the last state in Reserve:true

Context.getactions () The array returned is very useful, print out you will find that you can understand the contents, you can directly modify the array to change the action of the painting

11.wx.drawcanvas when context.drawimage on the phone can be painted on the computer development tools do not draw out

12.wx.canvastotempfilepath

There is only one line in the official document, the original

The Wx.canvastotempfilepath parameter is an object including Canvasid,success,fail,complete, which is similar to wx.savefile;

      Wx.canvastotempfilepath ({
       canvasid: ' Target ',
       success:function Success (res) {
        wx.savefile ({
         TempFilePath:res.tempFilePath,
         success:function Success (res) {
          console.log (' Saved:: ' + res.savedfilepath);
         },
         complete:function fail (e) {
          console.log (e.errmsg);}}
        )
       ,
       complete:function Complete (e) {
        console.log (e.errmsg);
       }
      );

Thank you for reading, I hope to help you, thank you for your support for this site!