May 19, 2021 WeChat Mini Program Development Document
Drawing interfaces and methods
canvas is in a two-dimensional grid.
The coordinates in the upper left
(0, 0)
In the
previous
sections, we used
fillRect(0, 0, 150, 75)
It means to draw a
150 x 75
px rectangle starting in the upper left corner
(0, 0)
We can add some events to the
<canvas/>
to observe its coordinate system
<canvas canvas-id="myCanvas"
style="margin: 5px; border:1px solid #d3d3d3;"
bindtouchstart="start"
bindtouchmove="move"
bindtouchend="end"/>
<view hidden="{{hidden}}">
Coordinates: ({{x}}, {{y}})
</view>
Page({
data: {
x: 0,
y: 0,
hidden: true
},
start: function(e) {
this.setData({
hidden: false,
x: e.touches[0].x,
y: e.touches[0].y
})
},
move: function(e) {
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
},
end: function(e) {
this.setData({
hidden: true
})
}
})
When you put your finger in canvas, the coordinates of the touch point are displayed between the lower parts: