小程序canvas画板
效果图
-
代码
`drawStart(e){
this.startX = e.touches[0].pageX
this.startY = e.touches[0].pageY
this.ctx = wx.createCanvasContext(‘myCanvas’,this)
this.ctx.setLineCap(‘round’)
this.ctx.setLineWidth(this.width)
this.ctx.setStrokeStyle(this.color)
this.ctx.beginPath()
this.isMove = true
},
drawmove(e){
if(this.isMove){
let x = e.touches[0].pageX,
y = e.touches[0].pageY
this.ctx.moveTo(this.startX,this.startY)
this.ctx.lineTo(x,y)
this.ctx.stroke()
this.startX = x
this.startY = y
x = null
y = null
}
this.ctx.draw(true)
},
drawend(){
this.ctx.closePath()
this.isMove = false
},
`
2. 因为需求要在canvas上面放一张图片,然后碰到了一个排列的问题。canvas属于小程序的原生组件,在真机上image标签不能覆盖在canvas上面。然后使用cover-image替换了image标签。cover-view