示例
23
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
#canvas {
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAfAD0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8/wCirmkaTPrmoRWVu9tHNLna15dRW0QwCTmSVlReB3IycAckCuk/4VTrX/P74b/8KjTP/kircox3ZNmzj6uf2NqH9sf2T9huf7V8/wCy/YfJbz/O3bfL2Y3b93G3Gc8V1Wn+A/EGi6tYzWun6R4kvXkZLfT7C/tdVd5PLdg5t7eV2YJtL/MpT5QHDKSp9/0yz8X6n4b1S31DUPilczafYl7Sa98NTCUyNdwbWWM3pSeWMNKyEgOgYuHzBEFwqVlC1i4wbPkqrkOjahcT2EMVjcyTahj7HGkLFrnLmMeWMfPl1ZeM/MpHUV7D8SZfH9/qGgf2jqvi3T9LtfK2av4qtbjS4o7mISMs23zpV81Yl4aLEjlThGkYs+lDqUL694H1HQdHvry4j0aS5h1IW9sBpijU77zL025QW8YWQo4V2EcSFl3htk8Z7Z2TSDl1PAKK7D4heKrbXvsFjbQabL9g8zzdUsNLgsPtkj7c4SKOP90uzCbxvOXZtu8Rx8fXRFtq7RDCiiimIms50tbyCaW3jvI45FdreYsElAOSjFGVsHodpB54IPNek2niDwlq1npEdr4O8LWeqzyTw3MN/d6mkKlQrQuJftQVBJuMeGOFaMu7qj/J5hRUSjzdSk7HpPiTxBp+vfFG6fwZonhvSrZb+8NnNOqpa3MLFtjSx30jQJ8gyqhUALYC5CgbH/C5E8Kf8S+C08N+JY7j5dTvLXw9aWsM0PVYYQ1qrHawSUvLGR5scYEZSNjN49RUexi0k9bD5n0O88eahcalo8M8OoeG9R0hp12PpulWWm30b7WISWGONJeFPzFTJDuIAkYjjg6KK0jHlViW7n//2Q==);
background-repeat: no-repeat;
background-size: contain;
background-color: #222;
background-position: center;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="50">
Canvas not supported
</canvas>
<script>
class Scratch {
constructor (selector, eraserSize) {
this.canvas = document.querySelector(selector) // 获取canvas
if (!this.canvas) throw Error('选择器无效!')
this.context = canvas.getContext('2d') // 初始化画布
this.eraserSize = eraserSize // 设置擦除大小
this.isDrag = false // 是否在擦除的状态
this._init() // 画布设置
this._moveListener() // 监听擦除
}
_init () {
this.context.save()
this.context.fillStyle = '#666'
this.context.beginPath()
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height)
this.context.restore()
}
/**
* 获取当前位置
*/
getCurPosition (e) {
const x = e.targetTouches[0].clientX
const y = e.targetTouches[0].clientY
const map = canvas.getBoundingClientRect()
return {
x: x - map.left,
y: y - map.top
}
}
/**
* 擦除当前位置
*/
cleanCur (position) {
this.context.save()
this.context.beginPath()
this.context.arc(position.x, position.y, this.eraserSize, 0, Math.PI * 2, false)
this.context.clip()
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.context.restore()
}
/**
* 擦除移动监听
*/
_moveListener () {
this.canvas.addEventListener('touchstart', e => {
let position = this.getCurPosition(e)
this.isDrag = true
this.cleanCur(position)
})
this.canvas.addEventListener('touchmove', e => {
let position
if (this.isDrag) {
position = this.getCurPosition(e)
this.cleanCur(position)
}
})
this.canvas.addEventListener('touchend', e => {
this.isDrag = false
})
}
}
new Scratch('#canvas', 15);
</script>
</body>
</html>
参考资料
https://github.com/muzqi/Article/blob/master/blog/canvas_1_eraser.md
