怎样使用Vue+canvas实现移动端手写板功能

<template>
 <p class="hello">
<!--touchstart,touchmove,touchend,touchcancel 这-->
 <button type="" v-on:click="clear">清除</button>
 <button v-on:click="save">保存</button>
 <canvas id="canvas" width="300" height="600" style="border:1px solid black">Canvas画板</canvas>
 <img v-bind:src="url" alt="">
 </p>
 
</template>
<script>
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);
 },
} 
} 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped>
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;
}
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

如何使用vue裁切预览组件

怎样使用JS+AJAX做出三级联动