java小程序画板流程图_微信小程序|简单易上手的画板功能

Page({

data: {

canvasw: 0,

canvash: 0,

//初始化函数

initCanvas: function () {

context = wx.createCanvasContext('canvas');

context.beginPath()

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

},

canvasStart: function (event) {

isButtonDown = true;

arrz.push(0);

arrx.push(event.changedTouches[0].x);

arry.push(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.clearRect(0, 0, canvasw, canvash);

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

context.stroke();

context.draw(false);

},

canvasEnd: function (event) {

isButtonDown = false;

},

//清除画布

cleardraw: function () {

arrx = [];

arry = [];

arrz = [];

context.clearRect(0, 0, canvasw, canvash);

context.draw(true);

},

onLoad: function (options) {

//画布初始化执行

this.startCanvas();

}

})