這次給大家帶來Vue+canvas實現移動端手寫板步驟詳解，Vue+canvas實現移動端手寫板的注意事項有哪些，下面就是實戰案例，一起來看一下。

清除

保存

Canvas畫板

var draw;

var preHandler = function(e){e.preventDefault();}

class Draw {

constructor(el) {

this.el = el

this.canvas = document.getElementById(this.el)

this.cxt = this.canvas.getContext('2d')

this.stage_info = canvas.getBoundingClientRect()

this.path = {

beginX: 0,

beginY: 0,

endX: 0,

endY: 0

}

}

init(btn) {

var that = this;

this.canvas.addEventListener('touchstart', function(event) {

document.addEventListener('touchstart', preHandler, false);

that.drawBegin(event)

})

this.canvas.addEventListener('touchend', function(event) {

document.addEventListener('touchend', preHandler, false);

that.drawEnd()

})

this.clear(btn)

}

drawBegin(e) {

var that = this;

window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()

this.cxt.strokeStyle = "#000"

this.cxt.beginPath()

this.cxt.moveTo(

e.changedTouches[0].clientX - this.stage_info.left,

e.changedTouches[0].clientY - this.stage_info.top

)

this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left

this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top

canvas.addEventListener("touchmove",function(){

that.drawing(event)

})

}

drawing(e) {

this.cxt.lineTo(

e.changedTouches[0].clientX - this.stage_info.left,

e.changedTouches[0].clientY - this.stage_info.top

)

this.path.endX = e.changedTouches[0].clientX - this.stage_info.left

this.path.endY = e.changedTouches[0].clientY - this.stage_info.top

this.cxt.stroke()

}

drawEnd() {

document.removeEventListener('touchstart', preHandler, false);

document.removeEventListener('touchend', preHandler, false);

document.removeEventListener('touchmove', preHandler, false);

//canvas.ontouchmove = canvas.ontouchend = null

}

clear(btn) {

this.cxt.clearRect(0, 0, 300, 600)

}

save(){

return canvas.toDataURL("image/png")

}

}

export default {

data () {

return {

msg: 'Welcome to Your Vue.js App',

val:true,

url:""

}

},

mounted() {

draw=new Draw('canvas');

draw.init();

},

methods:{

clear:function(){

draw.clear();

},

save:function(){

var data=draw.save();

this.url = data;

console.log(data)

},

mutate(word) {

this.$emit("input", word);

},

}

}

h1, h2 {

font-weight: normal;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

#canvas {

background: pink;

cursor: default;

}

#keyword-box {

margin: 10px 0;

}

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vue地區選擇組件使用步驟詳解

JS+CSS3實現鼠標與圖片互動放大效果

總結

以上是生活随笔為你收集整理的移动端html5手写板,Vue+canvas实现移动端手写板步骤详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。