WeChat applet wxcanvas
The test phone is IPHONE6, and the developer tool version is 0.10.102800. The same is true for the developer tool version 0.11.112301
There are many differences between canvas in WeChat applets. The following is called wxcanvas in WeChat applets.
The following are all the real things I have tested little by little, please read them patiently:
, unlike h5canvas, there are width and height attributes and width and height styles. He only has style, so it can be understood that he is just a box;
Don't treat it as real H5canvas, just treat it as a div. Things that draw the range also exist. Change the width and height to display it, or there is a redraw here, but I don't know how to implement it;
3. Change the width and height of wxcanvas style, and do not change the size of the thing on the original canvas;
The size of the object on the original canvas cannot be changed.
5. Official statement: context is just a container that records method calls, used to generate an array of actions that record drawing behavior. There is no correspondence between context and <canvas/>. A context generates a canvas to draw action arrays can be applied to multiple <canvas/>.
In fact, after (), the information in the context will be cleared. If you want to reuse it, you need to save the operation array by var temp=() before you can use it repeatedly;
6. Pay attention
({
canvasId: 'target',
actions: ()
});
By default, the canvas will be cleared, and you can't figure it out.
({
canvasId: 'target',
actions: (),
reserve:true
});
7. "Key Point"
<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas- style='width:{{width}}px;height:{{height}}px'></canvas>
Note that the page can only be avoided when disable-scroll="true" and bindtouchmove="cvsMove" exist at the same time. catchtouchmove is not possible.
In the above writing method, ccvsMove and cvsMove will both trigger.
ccvsMove returns a normal touch event object, including pageX, clientX, etc.
cvsMove returns the canvasTouch event object, there is no pageX, clientX, only x,y
8.
({
canvasId: 'target',
actions: [],
reserve:false
});
Canvas and canvas state can be cleared
9. The scale tranlate rotate and other states of the canvas will be followed by the last state when reserve:true
10. The returned array is very useful. If you print it out, you will find that you can understand everything inside. You can directly modify the array and change the drawing action.
You can draw it on your phone, but you can't draw it on your computer development tool.
There is only one line in the official document, it turns out
The parameters are an object including canvasID, success, fail, complete, and the same as;
({
canvasId: 'target',
success: function success(res) {
({
tempFilePath: ,
success: function success(res) {
('saved::' + );
},
complete: function fail(e) {
();
}
});
},
complete: function complete(e) {
();
}
});
Thank you for reading, I hope it can help you. Thank you for your support for this site!