微信小程序_(组件)canvas画布

canvas画布效果　　官方文档：传送门

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    //设置画笔的颜色
    context.setStrokeStyle("#00ff00")
    //设置线宽为5个像素
    context.setLineWidth(5)
    //左上角坐标(0，0)长宽200
    context.rect(0, 0, 200, 200)
    //对上面定义动作进行绘制
    context.stroke()

    context.setStrokeStyle("#ff0000")

    context.setLineWidth(2)
    //移动画笔的位置到(160,100)
    context.moveTo(160, 100)
    //左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
    context.arc(100, 100, 60, 0, 2 * Math.PI, false)
    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()
  }
})

text.js

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas>
</view>

text.wxml

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json

实现过程

　　canvas-id 　　canvas 组件的唯一标识符

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

定义画布样式

<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas>
</view>

在JS中添加onReady: function()函数(dom加载完成后执行的函数)

　　绘制矩形

    //设置画笔的颜色
    context.setStrokeStyle("#00ff00")
    //设置线宽为5个像素
    context.setLineWidth(5)
    //左上角坐标(0，0)长宽200
    context.rect(0, 0, 200, 200)
    //对上面定义动作进行绘制
    context.stroke()

　　绘制四个圆

    context.setStrokeStyle("#ff0000")

    context.setLineWidth(2)
    //移动画笔的位置到(160,100)
    context.moveTo(160, 100)
    //坐标原点(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
    context.arc(100, 100, 60, 0, 2 * Math.PI, false)
    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()

 context.arc(100, 100, 60, 0, 2 * Math.PI, false)

　　第六个参数，当参数为true时画笔顺时针绘制，为false时逆时针绘制

绘制移动的图形效果

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },

  pos:{
    x:0,
    y:0
  },

  onReady: function (e) {
    this.draw()
  },

  btnclick:function(){
    setInterval(this.draw,10)
  },

  draw:function(){

    this.pos.x++;
    this.pos.y++;
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    //左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
    context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false)

    context.stroke()
    context.draw()
  }
})

test.js

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"
  bindtouchstart="btnclick"></canvas>
</view>

text.wxml

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json

实现过程

　　在text.wxml中绑定手指点击事件bindtouchstart="btnclick"

bindtouchstart            手指触摸动作开始
bindtouchmove            手指触摸后移动
bindtouchend            手指触摸动作结束
bindtouchcancel            手指触摸动作被打断，如来电提醒，弹窗
bindlongtap            手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror            当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

手指触碰属性名

　　初始化图形坐标原点

  pos:{
     x:0,
     y:0
   },

　　当dom加载完成后执行绘画动作draw()

  onReady: function (e) {
    this.draw()
  },

　　添加draw()绘画动作

  draw:function(){

    this.pos.x++;
    this.pos.y++;
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    //左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
    context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false)

    context.stroke()
    context.draw()
  }

　　手指触摸动作后图形坐标每隔10ms进行x++,y++方向移动(设置事件间隔对图形进行重绘制)

  btnclick:function(){
    setInterval(this.draw,10)
  },