Effects and examples of the canvas tablet of the WeChat Applet

Effects and examples of the canvas WordPad for small programs

Effects and examples of canvas WordPad

Wordpad effect: write text, reset artboard, export image, determine whether to write content before exporting Image

App. json:

Add a route: "pages/canvas"

{"Pages": ["pages/index", "pages/logs", "pages/canvas"], "window": {"navigationBarBackgroundColor ": "# ea6a46", "navigationBarTextStyle": "white", "navigationBarTitleText": "WordPad", "backgroundTextStyle": "dark", "backgroundColor": "white ", "enablePullDownRefresh": "true "}}

Then:

Canvas. wxml:

<! -- Pages/canvas. wxml --> <canvas class = "canvas" id = "canvas" canvas-id = "canvas" disable-scroll = "true" bindtouchstart = "canvasStart" bindtouchmove = "canvasMove" bindtouchend = "canvasEnd" touchcancel = "canvasEnd" binderror = "canvasIdErrorCallback"> </canvas> <button type = "default" bindtap = "cleardraw"> clear the canvas </button> <button type = "default" bindtap = "getimg"> export an image </button>

Canvas. js:

// Canvas global configuration var context = null; // use wx. createContext: Get the drawing context contextvar isButtonDown = false; var arrx = []; var arry = []; var arrz = []; var canvasw = 0; var canvash = 0; // obtain system information wx. getSystemInfo ({success: function (res) {canvasw = res. optional wwidth; // device width canvash = res. required wwidth * 7/15 ;}}); // register the Page ({canvasIdErrorCallback: function (e) {console. error (e. detail. errMsg)}, canvasStart: function (e Vent) {isButtonDown = true; arrz. push (0); arrx. push (event. changedTouches [0]. x); arry. push (event. changedTouches [0]. y); // context. moveTo (event. changedTouches [0]. x, event. changedTouches [0]. y) ;}, canvasMove: function (event) {if (isButtonDown) {arrz. push (1); arrx. push (event. changedTouches [0]. x); arry. push (event. changedTouches [0]. y); // context. lineTo (event. changedTouches [0]. x, event. changedTouches [0]. y); // context. stroke (); // context. draw ()}; for (var I = 0; I <arrx. length; I ++) {if (arrz [I] = 0) {context. moveTo (arrx [I], arry [I])} else {context. lineTo (arrx [I], arry [I]) };}; context. clearRect (0, 0, canvasw, canvash); context. stroke (); context. draw (true) ;}, canvasEnd: function (event) {isButtonDown = false ;}, cleardraw: function () {// clear the canvas arrx = []; arry = []; arrz = []; contex T. clearRect (0, 0, canvasw, canvash); context. draw (true) ;}, getimg: function () {if (arrx. length = 0) {wx. showModal ({title: 'hprompt ', content: 'signature content cannot be blank! ', ShowCancel: false}); return false ;}; // generates the image wx. canvasToTempFilePath ({canvasId: 'canvas ', success: function (res) {console. log (res. tempFilePath); // save it to the server wx. uploadFile ({url: 'a. php ', // interface address filePath: res. tempFilePath, name: 'file', formData: {// other additional form data 'user': 'test'}, success: function (res) {console. log (res) ;}, fail: function (res) {console. log (res) ;}, complete: function (res) {}}) ;}},/*** initial data on the page */data: {src: ""},/*** lifecycle function -- listen to page loading */onLoad: function (options) {// use wx. createContext: Obtain the drawing context = wx. createCanvasContext ('canvas '); context. beginPath () context. setStrokeStyle ('#000000'); context. setLineWidth (4); context. setLineCap ('round '); context. setLineJoin ('round ');}})

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!