[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码

<title>Document</title> <style> *{ margin:0; padding: 0; } .container{ position: relative; width: 600px; height: 400px; margin: 100px auto; border: 1px solid black; } .container div{ position: absolute; width: 600px; height: 400px; color: red; font-size: 30px; text-align: center; line-height: 400px; } canvas{ position: absolute; } </style>
电话号码:18470598968
<script> let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = '#999'; ctx.fillRect(0,0,600,400); canvas.onmousedown = function(event){ ctx.clearRect(event.offsetX,event.offsetY,10,10); canvas.onmousemove = function(event){ ctx.clearRect(event.offsetX,event.offsetY,10,10); } } canvas.onmouseup = function(){ canvas.onmousemove = null; } </script> 

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题