Wechat applet canvas development example and precautions

Wechat applet wxcanvas

The test phone is iphone6, and the developer tool version is 0.10.102800. The same is true for developer tools version 0.11.112301

There are many differences between the canvas and non H5 canvas in wechat applet. The canvas of wechat applet is called wxcanvas below

Here are all the dry goods I tested a little bit. Be patient:

1. Wx canvas, unlike h5canvas, has width and height attributes and style styles of width and height. He has only style, which can be understood as a frame;

2. Wxcanvas should not be regarded as a real h5canvas, just as it is a div, and the things that draw the range also exist. If the width is changed, the height will be displayed, or there will be redrawing, but I don't know how to realize it;

3. Change the width and height of wxcanvas style without changing the size of things on the original canvas;

4. Zooming in and out in CSS transform cannot change the size of things on the original canvas

5. Official statement: context is just a container for recording method calls, which is used to generate an actions array for recording drawing behavior. Context does not correspond to < Canvas / >. A canvas drawing action array generated by a context can be applied to multiple < Canvas / >.

In fact, after context. Getactions(), the information in the context will be cleared. If you want to reuse it, you need var temp = context. Getactions() to save the action array before it can be reused in wx.drawcanvas;

6. Attention

The canvas will be cleared by default. Do you want to clear it

7. Key

Note that only when disable scroll = "true" and bindtouchmove = "cvsmove" exist at the same time can the page be prevented from following. Catchtouchmove does not work

In the above way, ccvsmove and cvsmove will be triggered,

Ccvsmove returns ordinary touch event objects, such as pagex, clientx, etc,

Cvsmove returns the canvastouch event object. There are no pagex and clientx, but only x and y

eight

You can empty the canvas and its state

9. The status of the canvas, such as scale tranlate rotate, will follow the last status when reserve: true

10. The array returned by context. Getactions() is very useful. If you print it out, you will find that you can understand the contents. You can directly modify the array and change the action of the painting

11. In wx.drawcanvas, context.drawimage can be drawn on the mobile phone, but not on the computer development tool

12.wx.canvasToTempFilePath

There is only one line in the official document

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

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