您的位置:首页 > 移动开发 > 微信开发

微信小程序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 微信 小程序