Vue怎么利用canvas实现移动端手写板

这篇文章将为大家详细讲解有关Vue怎么利用canvas实现移动端手写板，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体如下：

<template>  <div 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" >Canvas画板</canvas>   <img v-bind:src="url" alt="">  </div>   </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> h2, h3 {  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>

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于“Vue怎么利用canvas实现移动端手写板”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。