new Vue({
el: '#app',
data() {
return {
}
},
mounted() {
// console.log('mounted111')
// const canvas = document.querySelector('#myCanvas')
// canvas.style.width = '500px'
// canvas.style.height = '500px'
// canvas.style.backgroundColor = 'red'
// const drawing = canvas.getContext('2d')
// console.log('drawing:',drawing)
// canvas.getContext('2d')
// canvas.getBoundingClientRect()
// let canvas = this.$refs.myCanvas
// canvas.height = 500
// canvas.width = 500
// canvas.backgroundColor = 'red'
// this.canvasTxt = canvas.getContext('2d')
// this.stageInfo = canvas.getBoundingClientRect()
},
methods: {
onTouchStart(event) {
event.preventDefault()
console.log('onTouchstart:',event)
},
onTouchMove(event) {
event.preventDefault()
console.log('onTouchMove:',event)
},
onTouchEnd(event) {
event.preventDefault()
console.log('onTouchEnd:',event)
},
}
})
<div id="app">
<canvas id='myCanvas' @touchstart.stop.prevent="onTouchStart($event)" style="width: 500px; height: 500px; background-color: red" />
</div>