效果图
wxml 代码
- <canvas
- canvas-id='myCanvas'
- class='myCanvas'
- disable-scroll='false'
- bindtouchstart='touchStart'
- bindtouchmove='touchMove'
- ></canvas>
JS 代码
- Page({
- data: {
- startX:0,
- startY:0
- },
- onLoad() {
- this.ctx = wx.createCanvasContext('myCanvas') // 创建 canvas 的绘图上下文 CanvasContext 对象
- },
- touchStart(e){
- this.startX = e.changedTouches[0].x
- this.startY = e.changedTouches[0].y// 获取点击开始时的坐标
- this.ctx.setStrokeStyle("#000");// 设置线的颜色
- this.ctx.setLineCap('round') // 设置线两端的样式
- this.ctx.setLineWidth(20)// 设置线的宽度
- this.ctx.beginPath()// 开始画
- },
- touchMove(e){
- let startX1 = e.changedTouches[0].x
- let startY1 = e.changedTouches[0].y// 记录移动的坐标
- this.ctx.moveTo(this.startX, this.startY)// 开始的坐标
- this.ctx.lineTo(startX1, startY1)// 移动的坐标
- this.ctx.stroke()// 画出当前路径
- this.startX = startX1;
- this.startY = startY1;// 把移动的坐标赋值给开始坐标
- wx.drawCanvas({
- canvasId: 'myCanvas',
- reserve: true,
- actions: this.ctx.getActions() // 获取绘图动作数组
- })
- }
- })
来源: http://www.jianshu.com/p/a2a171353b5b