微信小程序--繪圖canvas
發(fā)布時(shí)間：2017-12-19 10:34 所屬欄目：小程序開(kāi)發(fā)教程
- <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">清除畫(huà)布</button>
- <button type="default" bindtap="getimg">導(dǎo)出圖片</button>
- Page {
- background: #cfeeff;
- }
- .canvas{
- width: 100%;
- height: 680rpx;
- }
- {
- "navigationBarTitleText": "畫(huà)板",
- "navigationBarBackgroundColor": "#eee200"
- }
- // canvas 全局配置
- var context = null;// 使用 wx.createContext 獲取繪圖上下文 context
- var isButtonDown = false;
- var arrx = [];
- var arry = [];
- var arrz = [];
- var canvasw = 0;
- var canvash = 0;
- //獲取系統(tǒng)信息
- wx.getSystemInfo({
- success: function (res) {
- canvasw = res.windowWidth;//設(shè)備寬度
- canvash = res.windowHeight;
- }
- });
- //注冊(cè)頁(yè)面
- Page({
- canvasIdErrorCallback: function (e) {
- console.error(e.detail.errMsg)
- },
- canvasStart: function (event) {
- 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 () {
- //清除畫(huà)布
- arrx = [];
- arry = [];
- arrz = [];
- context.clearRect(0, 0, canvasw, canvash);
- context.draw(true);
- },
- getimg: function () {
- if (arrx.length == 0) {
- wx.showModal({
- title: '提示',
- content: '簽名內(nèi)容不能為空！',
- showCancel: false
- });
- return false;
- };
- //生成圖片
- wx.canvasToTempFilePath({
- canvasId: 'canvas',
- success: function (res) {
- console.log(res.tempFilePath);
- //存入服務(wù)器
- wx.uploadFile({
- url: 'a.php', //接口地址
- filePath: res.tempFilePath,
- name: 'file',
- formData: { //HTTP 請(qǐng)求中其他額外的 form data
- 'user': 'test'
- },
- success: function (res) {
- console.log(res);
- },
- fail: function (res) {
- console.log(res);
- },
- complete: function (res) {
- }
- });
- }
- })
- },
- /**
- * 頁(yè)面的初始數(shù)據(jù)
- */
- data: {
- src: ""
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
- */
- onLoad: function (options) {
- // 使用 wx.createContext 獲取繪圖上下文 context
- context = wx.createCanvasContext('canvas');
- context.beginPath()
- context.setStrokeStyle('#ffff00');
- context.setLineWidth(10);
- context.setLineCap('round');
- context.setLineJoin('round');
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
- */
- onShow: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
- */
- onUnload: function () {
- },
- /**
- * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 頁(yè)面上拉觸底事件的處理函數(shù)
- */
- onReachBottom: function () {
- },
- /**
- * 用戶(hù)點(diǎn)擊右上角分享
- */
- onShareAppMessage: function () {
- }
- })
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/18206.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
