小程序画布canvas

实现在小程序画布上自由移动画线了解小程序canvas。

在小程序开发工具新建一个paint页面。

小程序画布组件canvas
打开paint.wxml

<canvas  canvas-id="canvasline" class="canvasboard"></canvas>

添加画布，设定组件标识canvasline，这样保存还是看不出有什么改变，

到paint.wxss设定样式

.canvasboard{
  background-color: #e2ebf3;
  width: 400px;
  height: 400px;
}

保存这样就看到一个方形的背景就是画布。如图，

小程序画布API。
moveTo()，把路径移动到画布中的指定点，不创建线条。
lineTo()，增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
主要是通过上面两个方法在canvas上画线的。
先要在画布创建绘图上下文
打开paint.js，在最上面
var ctx=wx.createCanvasContext('canvasline')
先尝试代码在上面画一条线。
在onLoad里面，保存。
ctx.moveTo(50, 50)
ctx.lineTo(200, 50)
ctx.stroke()
ctx.draw()
如图，

要自由移动画线，就要加上触摸开始，移动事件
paint.wxml

<canvas canvas-id="canvasline" class="canvasboard" bindtouchstart='handtouchstart' bindtouchmove="handtouchmove"></canvas>

写触摸开始和移动事件取到开始和移动触摸的坐标

// 触屏开始
  handtouchstart: function (e) {
    let startx = e.changedTouches[0].x
    let starty = e.changedTouches[0].y
  },
  // 触屏移动
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
  },

这样取到了触摸移动的位置。

新加x，y，newx，newy变量分别取起始位置和移动位置

data: {
    x:0,
    y:0,
    newx: 0,
    newy: 0,
  },

开始触摸取位置

handtouchstart: function (e) {
    let startx = e.changedTouches[0].x
    let starty = e.changedTouches[0].y
    this.setData({
      x: startx,
      y: starty,
    })
  },

 
移动取位置

 handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
},

 
取到位置那就好办了，把刚刚写在onLoad画线的代码移过来，

// 触屏移动
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw()
  },

保存，去试试。如图，

这只是画直线，不是我想要和自由移动画线。
看上面代码，要自由移动画线，ctx.moveTo(this.data.x, this.data.y)这里的起始移动的位置也要跟着触摸移动变的才对。这样就知道怎么处理了，随着移动更新起始位置x，y的值。

// 触屏移动
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw()
    this.setData({
      x: movex,
      y: movey,
    })
  },

保存，去试试。如图，

有一个点在移动，却没有成线。刚才画直线也是画一条画下一条上一条就不见了。
那么要看小程序画布draw方法，发现只需要加个true参数就可以了。
若参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。

 handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw(true)
    this.setData({
      x: movex,
      y: movey,
    })
  },

 
保存，去试试，如图，

 

 

转载于:https://my.oschina.net/oisanblog/blog/3072574