微信小程序canvas画图功能实现
来源:互联网 发布:扫描仪识别软件 编辑:程序博客网 时间:2024/06/09 15:29
废话不说直接上代码
// 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"
此程序目前的问题是在模拟器上运行正常,但是在手机上测试,只能画一笔
1 0
- 微信小程序canvas画图功能实现
- canvas实现简单的画图功能
- canvas画图小程序
- Canvas实现画图工具
- 简易画图程序(实现橡皮筋功能)
- Html5 Canvas+Javascript实现一个简单画图程序(一)
- Html5 Canvas+Javascript实现一个简单画图程序(二)
- Html5 Canvas+Javascript实现一个简单画图程序(三)
- 实现简单的Canvas画图
- HTML5 Canvas实现web画图
- 12864 实现画图功能
- c#实现画图功能
- 画图程序简单实现
- HTML canvas原生js实现鼠标画图
- android canvas实现在图片上画图
- canvas实现放大镜功能
- canvas实现画板功能
- canvas实现涂鸦功能
- 双塔问题
- 文章标题
- OpenStack网络指南(6)OpenStack网络
- 莫队模板题 小Z的袜子
- 命名空间(C# 参考)
- 微信小程序canvas画图功能实现
- 我的第一篇博客&json手动转为对应的javabean
- ElasticSearch的JAVA 客户端(JAVA API)
- linux常用命令学习
- 正向代理和反向代理
- flash存储程序
- 系统&&容器docker管理工具【cockpit】
- Java的多线程机制系列:(二)缓存一致性和CAS
- 好久没有写博客了