使用canvas做一个兼容pc/h5的画板。
前置知识：canvas、事件捕获和冒泡、UI事件mouse/touch。
首先创建一个画布
1
2
3
4
5
6
7
8
9
| <canvas id="canvas" width="400" height="400"></canvas>
<script>
const ctx = canvas.getContext('2d')
ctx.strokeStyle = 'pink'
ctx.lineWidth = 1
ctx.fillStyle = '#eee'
ctx.fillRect(0, 0, 400, 400)
</script>
|
然后实现pc端各个mouse事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| let drawing = false
let x = 0,
y = 0
canvas.addEventListener('mousedown', (e) => {
drawing = true
x = e.x
y = e.y
ctx.moveTo(x, y)
ctx.lineTo(x + 1, y + 1)
ctx.stroke()
ctx.beginPath()
})
canvas.addEventListener('mousemove', (e) => {
if (drawing) {
e && e.preventDefault()
ctx.moveTo(x, y)
x = e.x
y = e.y
ctx.lineTo(x, y)
ctx.stroke()
ctx.beginPath()
}
})
canvas.addEventListener('mouseup', (e) => {
console.log('end', e)
drawing = false
})
canvas.addEventListener('mouseleave', (e) => {
console.log('leave', e)
drawing = false
})
|
移动端touch事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| canvas.addEventListener('touchstart', (e) => {
console.log('touchstart', e)
drawing = true
x = e.touches[0].pageX - e.touches[0].target.offsetLeft
y = e.touches[0].pageY - e.touches[0].target.offsetTop
ctx.moveTo(x, y)
ctx.lineTo(x + 1, y + 1)
ctx.stroke()
ctx.beginPath()
})
canvas.addEventListener('touchmove', (e) => {
console.log('touchmove', e)
if (drawing) {
e && e.preventDefault()
ctx.moveTo(x, y)
x = e.touches[0].pageX - e.touches[0].target.offsetLeft
y = e.touches[0].pageY - e.touches[0].target.offsetTop
ctx.lineTo(x, y)
ctx.stroke()
ctx.beginPath()
}
})
canvas.addEventListener('touchend', (e) => {
console.log('touchend', e)
drawing = false
})
|
当然了，这里需要判断是pc还是h5，可参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const isPc = () => {
const userAgentInfo = navigator.userAgent.toLowerCase()
const agents = [
'android',
'iphone',
'symbianos',
'windows phone',
'ipad',
'ipod',
]
let flag = true
for (var v = 0; v < agents.length; v++) {
if (userAgentInfo.indexOf(agents[v]) > 0) {
flag = false
break
}
}
return flag
}
|
完整代码：https://github.com/co2color/js-canvas-draw
demo：https://cococolor.cc/draw