这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序canvas写字板效果及实例的相关资料,需要的朋友可以参考下
微信小程序canvas写字板效果及实例
写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容
app.json:
添加一个路由:"pages/canvas/canvas"
- {
- "pages":[
- "pages/index/index",
- "pages/logs/logs",
- "pages/canvas/canvas"
- ],
- "window":{
- "navigationBarBackgroundColor": "#ea6a46",
- "navigationBarTextStyle":"white",
- "navigationBarTitleText": "写字板",
- "backgroundTextStyle":"dark",
- "backgroundColor":"white",
- "enablePullDownRefresh":"true"
- }
- }
然后就是:
canvas.wxml:
- <!--pages/canvas/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">清除画布</button>
- <button type="default" bindtap="getimg">导出图片</button>
canvas.js:
- // canvas 全局配置
- var context = null; // 使用 wx.createContext 获取绘图上下文 context
- var isButtonDown = false;
- var arrx = [];
- var arry = [];
- var arrz = [];
- var canvasw = 0;
- var canvash = 0;
- //获取系统信息
- wx.getSystemInfo({
- success: function(res) {
- canvasw = res.windowWidth; //设备宽度
- canvash = res.windowWidth * 7 / 15;
- }
- });
- //注册页面
- 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() {
- //清除画布
- arrx = [];
- arry = [];
- arrz = [];
- context.clearRect(0, 0, canvasw, canvash);
- context.draw(true);
- },
- getimg: function() {
- if (arrx.length == 0) {
- wx.showModal({
- title: '提示',
- content: '签名内容不能为空!',
- showCancel: false
- });
- return false;
- };
- //生成图片
- wx.canvasToTempFilePath({
- canvasId: 'canvas',
- success: function(res) {
- console.log(res.tempFilePath);
- //存入服务器
- wx.uploadFile({
- url: 'a.php',
- //接口地址
- filePath: res.tempFilePath,
- name: 'file',
- formData: { //HTTP 请求中其他额外的 form data
- 'user': 'test'
- },
- success: function(res) {
- console.log(res);
- },
- fail: function(res) {
- console.log(res);
- },
- complete: function(res) {
- }
- });
- }
- })
- },
- /**
- * 页面的初始数据
- */
- data: {
- src: ""
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function(options) {
- // 使用 wx.createContext 获取绘图上下文 context
- context = wx.createCanvasContext('canvas');
- context.beginPath() context.setStrokeStyle('#000000');
- context.setLineWidth(4);
- context.setLineCap('round');
- context.setLineJoin('round');
- }
- })
来源: http://www.phperz.com/article/17/0831/338638.html