直接上Demo
<template><divclass="hello"><buttontypev-on:click="clear">清除</button><buttonv-on:click="save">保存</button><canvasid="canvas"width="375"height="600"style="float:left">Canvas画板</canvas><imgv-bind:src="url"alt/></div></template><script>vardraw;varpreHandler=function(e){e.preventDefault();};classDraw{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){varthat=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){varthat=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);}clear(btn){this.cxt.clearRect(0,0,300,600);}save(){returncanvas.toDataURL("image/png");}}exportdefault{data(){return{msg:"WelcometoYourVue.jsApp",val:true,url:""};},mounted(){draw=newDraw("canvas");draw.init();},methods:{clear:function(){draw.clear();},save:function(){vardata=draw.save();this.url=data;console.log(data);},mutate(word){this.$emit("input",word);}}};</script>
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
<stylescoped>*{margin:0;padding:0;}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}#canvas{background:pink;touch-action:none;cursor:default;}#keyword-box{margin:10px0;}</style>
