[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>

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。