คุณเล่นการ์ดเกาหรือไม่? ชนิดที่สามารถชนะโดยบังเอิญ วันนี้ฉันจะแบ่งปันเอฟเฟกต์การ์ดรอยขีดข่วนให้กับคุณตามเทคโนโลยี HTML5 เพียงแค่ถือเมาส์บนพีซีและบนโทรศัพท์คุณเพียงแค่ต้องใช้นิ้วและเกาเลเยอร์เบา ๆ เพื่อจำลองเอฟเฟกต์รอยขีดข่วนจริง
เราใช้ผ้าใบผ้าใบของ HTML5 รวมกับ API ที่ให้ไว้เพื่อวาดหน้ากากสีเทาบนองค์ประกอบผ้าใบจากนั้นวาดรูปโปร่งใสโดยการตรวจจับการเคลื่อนไหวของเมาส์และท่าทางของผู้ใช้ ด้วยวิธีนี้คุณสามารถเห็นภาพจริงภายใต้พื้นหลังผืนผ้าใบและบรรลุเอฟเฟกต์การ์ดรอยขีดข่วน
HTMLเราจำเป็นต้องเพิ่มองค์ประกอบแท็ก Canvas ลงในหน้าและส่วนที่เหลือขึ้นอยู่กับ JavaScript โปรดทราบว่าองค์ประกอบ Canvas เป็นองค์ประกอบที่มีอยู่ใน HTML5 เท่านั้นและทำงานบนเบราว์เซอร์สมัยใหม่ที่รองรับ HTML5
คัดลอกรหัส