canvas

---

画布。

属性名	类型	默认值	说明
canvas-id	string		canvas 组件的唯一标识符
disable-scroll	boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	eventhandle		手指触摸动作开始
bindtouchmove	eventhandle		手指触摸后移动
bindtouchend	eventhandle		手指触摸动作结束
bindtouchcancel	eventhandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	eventhandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	eventhandle		当发生错误时触发 error 事件，detail = {errmsg: 'something wrong'}

注：

1. canvas标签默认宽度300px、高度225px

2. 同一页面中的canvas-id不可重复，如果使用一个已经出现过的canvas-id，该canvas标签对应的画布将被隐藏并不再正常工作

示例代码：

<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstcanvas"></canvas>
<!-- 当使用绝对定位时，文档流后边的canvas的显示层级高于前边的canvas-->
<canvas style="width: 400px; height: 500px;" canvas-id="secondcanvas"></canvas>
<!-- 因为canvas-id与前一个canvas重复，该canvas不会显示，并会发送一个错误事件到appservice -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondcanvas" binderror="canvasiderrorcallback"></canvas>

// canvas.js
page({
  canvasiderrorcallback: function (e) {
    console.error(e.detail.errmsg)
  },
  onready: function (e) {
    //使用wx.createcontext获取绘图上下文context
    var context = wx.createcanvascontext('firstcanvas')

    context.setstrokestyle("#00ff00")
    context.setlinewidth(5)
    context.rect(0,0,200,200)
    context.stroke()
    context.setstrokestyle ("#ff0000")
    context.setlinewidth(2)
    context.moveto(160,100)
    context.arc(100,100,60,0,2*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()
    context.draw()
  }
})

相关api：wx.createcanvascontext

bug & tip