小程式-canvas塗鴉

摘要： 效果圖 wxml程式碼 <canvas canvas-id='myCanvas' class='myCanvas' disable-scroll='false' bindtou...

wxml程式碼

<canvas
canvas-id='myCanvas'
class='myCanvas'
disable-scroll='false'
bindtouchstart='touchStart'
bindtouchmove='touchMove'
></canvas>

js程式碼

Page({
data: {
startX:0,
startY:0
},
onLoad() {
this.ctx = wx.createCanvasContext('myCanvas') //建立 canvas 的繪圖上下文CanvasContext物件
},
touchStart(e){
this.startX = e.changedTouches[0].x 
this.startY = e.changedTouches[0].y//獲取點選開始時的座標
this.ctx.setStrokeStyle("#000");//設定線的顏色
this.ctx.setLineCap('round') //設定線兩端的樣式
this.ctx.setLineWidth(20)//設定線的寬度
this.ctx.beginPath()//開始畫
},
touchMove(e){
let startX1 = e.changedTouches[0].x
let startY1 = e.changedTouches[0].y//記錄移動的座標
this.ctx.moveTo(this.startX, this.startY)//開始的座標
this.ctx.lineTo(startX1, startY1)//移動的座標
this.ctx.stroke()//畫出當前路徑
this.startX = startX1;
this.startY = startY1;//把移動的座標賦值給開始座標
wx.drawCanvas({
canvasId: 'myCanvas',
reserve: true,
actions: this.ctx.getActions() // 獲取繪圖動作陣列
})
}
})