微信小程序canvas画图功能实现
2016-12-26 21:40
1011 查看
废话不说直接上代码
// canvas.js
var x1,y1;
var ctx = wx.createCanvasContext('firstCanvas'),i=0,j=0;
var colorArray='#000000';
Page({
EventHandleStart: function(event) {
x1 = event.touches[0].x;
y1 = event.touches[0].y;
},
EventHandle: function(event) {
var x = event.touches[0].x;
var y = event.touches[0].y;
ctx.moveTo(x1, y1); // 设置路径起点坐标
ctx.lineTo(x, y); // 绘制一条直线
ctx.stroke();
ctx.draw(true);
x1 = x;
y1 = y;
},
onReady: function (e) {
ctx.setLineWidth(2); // 设置线宽
ctx.setStrokeStyle('yellow');
console.log('添加qq群225467502学习交流');
}
})
关于怎么禁止canvas随着手指滚动?
只要给canvas加上这个属性disable-scroll="true"
此程序目前的问题是在模拟器上运行正常,但是在手机上测试,只能画一笔
// canvas.js
var x1,y1;
var ctx = wx.createCanvasContext('firstCanvas'),i=0,j=0;
var colorArray='#000000';
Page({
EventHandleStart: function(event) {
x1 = event.touches[0].x;
y1 = event.touches[0].y;
},
EventHandle: function(event) {
var x = event.touches[0].x;
var y = event.touches[0].y;
ctx.moveTo(x1, y1); // 设置路径起点坐标
ctx.lineTo(x, y); // 绘制一条直线
ctx.stroke();
ctx.draw(true);
x1 = x;
y1 = y;
},
onReady: function (e) {
ctx.setLineWidth(2); // 设置线宽
ctx.setStrokeStyle('yellow');
console.log('添加qq群225467502学习交流');
}
})
关于怎么禁止canvas随着手指滚动?
只要给canvas加上这个属性disable-scroll="true"
此程序目前的问题是在模拟器上运行正常,但是在手机上测试,只能画一笔
相关文章推荐
- 微信小程序小组件 基于Canvas实现直播点赞气泡效果
- 微信小程序实现简单定位功能
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- 微信小程序实现皮肤功能(夜间模式)
- 微信小程序 支付功能(前端)的实现
- 微信小程序-js实现单选功能
- 微信小程序通过本地缓存实现点赞功能
- 微信小程序,实现多个按钮toggle功能
- 微信小程序 实现列表项滑动显示删除按钮的功能
- 微信小程序 向左滑动删除功能的实现
- 微信小程序之ES6与事项助手的功能实现
- 微信小程序-TabBar功能实现
- Html5 Canvas+Javascript实现一个简单画图程序(一)
- 使用DeviceOne实现微信小程序功能
- 微信小程序实现带刻度尺滑块功能
- 微信小程序 开发之快递查询功能的实现
- 微信小程序 五星评价功能的实现
- 微信小程序实现按所选条件进行筛选功能
- 微信小程序分组开发与左滑功能实现
- 微信小程序 支付功能实现PHP实例详解