微信小程序_(组件)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