<canvas
id="canvas"
type="2d"
style="margin:5px;border:1px solid #d3d3d3"
@touchstart="start"
@touchmove="move"
@touchend="end"
></canvas>
需要标记id如果用select
wx.createSelectorQuery()
.select('#canvas')
.fields({
node: true,
size: true,
})
.exec((res)=> {
console.log(res)})
<div>
画布
<canvas
canvas-id="firstCanvas"
id="canvas"
type="2d"
style="margin:5px;border:1px solid #d3d3d3"
@touchstart="start"
@touchmove="move"
@touchend="end"
></canvas>
<p v-if="show">
Coordinates: ({{x}}, {{y}})
</p>
<image src="../../static/images/10.jpg" alt="" @click="draw" id="img"/>
methods:{
start:function(e){
this.show = true
this.x = e.mp.touches[0].x
this.y = e.mp.touches[0].y
console.log("start",e)
},
move:function(e){
this.x = e.mp.touches[0].x
this.y = e.mp.touches[0].y
console.log("move",e)
},
end:function(e){
this.show = false
console.log("end",e)
},
draw(){
// const query = wx.createSelectorQuery()
wx.createSelectorQuery().select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 50, 50)
const image = canvas.createImage()
image.src ="../../static/images/10.jpg"
image.onload = function(){
ctx.drawImage(image, 60, 10, 150, 100)
}
})
}
}
点击图片开始画