WeChat mini-program canvas development example and precautions

This article mainly introduces the wxcanvas development example of the mini program and relevant information about the precautions. Here we will compare canvas with canvas in H5 and explain the precautions, for more information, see wxcanvas.

The tested mobile phone is IPHONE6 and the developer tool version is 0.10.102800. The same is true for developer tool 0.11.20.301.

There are many differences between canvas and non-h5 canvas in a applet. the canvas of the applet is called wxcanvas below.

Below are all the dry goods I have tested a little bit. Please be patient:

1. wxcanvas, unlike h5canvas, which has the width and height attributes and the style of width and height. He only has a style, which can be understood as a box;

2. wxcanvas should not be regarded as H5canvas, just as it is p, and something that draws a range also exists. Changing the width and height will be displayed, or there will be re-painting here, but I don't know how to implement it;

3. Change the width and height of the wxcanvas style instead of the size of the original canvas;

4. The size of things on the original canvas cannot be changed as the css transform changes increase or decrease.

5. Official Statement: context is only a container for recording method calls and is used to generate the actions array for recording the drawing behavior. Context and There is no ing relationship. The draw action array generated by one context can be applied to multiple .

Actually, context. after getActions (), the information in the context is cleared. If you want to reuse the information, you need var temp = context. getActions () saves the Operation Array before it can be used repeatedly for wx. drawcanvas;

6. Note

wx.drawCanvas({　　canvasId: 'target',　　actions: context.getActions()});

The canvas is cleared by default.

wx.drawCanvas({  canvasId: 'target',  actions: context.getActions(),  reserve:true});

7. Highlights

Note: When disable-scroll = "true" and bindtouchmove = "cvsMove" coexist, the page cannot be moved.

In the above Code, both ccvsMove and cvsMove will be triggered,

CcvsMove returns common touch event objects, including pageX and clientX,

CvsMove returns the canvasTouch event object, which has no pageX, clientX, and only x and y.

8.

wx.drawCanvas({  canvasId: 'target',  actions: [],  reserve:false});

You can clear the status of the canvas and canvas.

9. The scale tranlate rotate and other statuses of the canvas. When reserve: true, the last status will be followed.

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

11. When wx. drawCanvas is used, 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.

Wx. canvasToTempFilePath is an object that includes canvasID, success, fail, complete, and 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 this article. I hope it will help you. Thank you for your support for this site!

For more articles about canvas development examples and precautions, please pay attention to PHP!