微信小程序画布详解

有的时候需要插入动画，这时就需要用到画布，接下来浅谈一下画布的功能和用法吧

wxml代码

<canvas style="width:414px;height:637px" canvas-id="plainId" class="canvas" bindtap="click" bindtouchmove="move"></canvas>

其中“canvas-id”为当前幕布的一名称。就例如服务号或订阅号中用户的openid，其中bindtap一般是点击以后才会触发的，接下来，就是“bindtouchmove”手指触摸后移动时便会触发并且可以传过来你目前移动的参数坐标哦如下

js代码片段

move: function( event ) {
var xx=event.touches[0].x;
var yy=event.touches[0].y;
console.log(xx,yy)
},

注意，若没有出现要打印坐标或者是“undefined”，可以先打印“event”，合理利用这个参数可以达到意想不到的效果哦

绘图工具最重要的就是要会绘图

js代码

onReady: function (e) {

// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createContext() //创建绘图工具
context.setStrokeStyle("#00ff00") //设置线条的样式后面直接跟颜色
context.setLineWidth(5)//设置线条的宽度后面直接写数字不必写单位
context.rect(0, 0, 200, 200)//创建矩形，其中前两个参数是坐标即x，y，后面两个参数分别是矩形的宽  // 和高，另外正方形也是矩形哦，他只是长和宽相同的矩形
context.stroke()//对当前的路径进行描边
context.setStrokeStyle("#ff0000")//同上
context.setLineWidth(2)
context.moveTo(160, 100)// 把路径移动到画布中的指定点，但不创建线条。参数自然就是坐标
context.arc(100, 100, 60, 0, 2
4000
* Math.PI, true)//添加一个弧形路径到当前路径，顺时针绘制。
//参数方面其中前两个参数还是坐标，第三个参数是矩形的宽度，第四各参数是起始弧度，从起始弧度开始，扫过的弧度，后一个参数可有可无
context.moveTo(140, 100)//同上
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
wx.drawCanvas({
canvasId: 'plainId',//这个就是刚开始设置的plainId
actions: context.getActions() // 获取绘图动作数组
})
}

也可以插入图片哦，具体的方法以及代码，明天再介绍吧，也可以在下方评论或者扫描下方的二维码进行讨论