因為此組件是用touch監聽位置，所以在pc端無法展示組件效果，需在移動端測試和使用
效果圖：
大致思路：canvas監聽touch，在canvas繪制，其實這個畫板在其他博客已經寫過很多了，只不過項目需要，要在vue框架實現，進行了一個基礎的封裝，使其在vue框架內使用
<!-- Html 代碼 -->
<canvas id='can_vans'>您當前瀏覽器不支持canvas，建議更換瀏覽器！</canvas>
<div>
<button @click='Output'>確定</button>
<button @click='ClearCanvas'>清空</button>
<button @click='Canvas_goBack'>返回</button>
</div>
// Js 代碼
mounted(){
let canvas = document.getElementById('can_vans')
let ctx = canvas.getContext('2d');
let _x = 0,
_y = 0,
x = 0,
y = 0;
console.log($('.can-vas').css('width'))
canvas.width = parseInt($('.can-vas').css('width'));// 設置畫布大小
canvas.height = 200;
canvas.addEventListener('touchstart', function (e) {// 開始繪制
e.preventDefault();
_x = e.touches[0].pageX,
_y = e.touches[0].pageY;
ctx.beginPath();// 路徑開始
ctx.moveTo(_x -20, _y - 83);
this.addEventListener('touchmove', function (e) {// 路徑移動
x = e.touches[0].pageX,
y = e.touches[0].pageY;
ctx.lineTo(x - 20, y - 83);
ctx.stroke();
});
});
},
methods:{
Output(){
let canvas = document.getElementById('can_vans')
let ctx = canvas.getContext('2d')
var oImg = new Image();
ctx.drawImage(oImg, 0, 0);
this.ImgSrc = canvas.toDataURL('image/png')
},
ClearCanvas(){
let canvas = document.getElementById('can_vans')
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height);
},
Canvas_goBack(){
console.log(this.ImgSrc)
}
}