微信小程序canvas画图功能实现

废话不说直接上代码

// 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"

此程序目前的问题是在模拟器上运行正常,但是在手机上测试,只能画一笔

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值