咱今天在閑逛網頁時,看到一個點擊帶水紋的按鈕特效,尼瑪,寫的還挺好,先看效果:
於是就奔着升級版的拿來主義,別人的好東西,咱都要拿來滴,so,扒代碼!
完整代碼在最后,是經過我的改進優化滴.
在這里先分析一下功能,就兩個核心點.
1.獲取當前鼠標點擊位置,注意這里要用 offsetX/Y,不能用screenX/Y或者clientX/Y,他們三個的區別可以上網搜一下,這里就不說了.
2.以獲取到的點擊位置為中心點,利用html的canvas畫布畫半透明的圓,這里為了體現水紋的動態擴展效果,要設置一個定時器或者使用瀏覽器自帶的
requestAnimationFrame函數(時間間隔根據不同瀏覽器而定,通常在60fps),在使圓的半徑動態的擴展,並且不能超過按鈕寬度.
即下面的代碼:
draw = function () { context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = color; context.fill(); radius += 2; if (radius < element.width) { requestAnimFrame(draw); } };
完整代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5實現點擊水波擴散效果</title> <style> * { box-sizing: border-box; outline: none; } body { font-family: 'Open Sans'; font-size: 100%; font-weight: 300; line-height: 1.5em; text-align: center; } h1 { color: #666666; font-size: 2rem; line-height: 1.5em; margin: 2em 0 2em 0; } .box { margin: 1rem; width: 18.75rem; } .box img { width: 100%; } .btn { border: none; color: white; overflow: hidden; margin: 1rem; padding: 0; text-transform: uppercase; width: 150px; height: 40px; } .btn.color-3 { background-color: #f6774f; } .btn-border.color-3 { background-color: transparent; border: 2px solid #f6774f; color: #f6774f; } .btn-round { border-radius: 10em; } .material-design { position: relative; } .material-design canvas { opacity: 0.25; position: absolute; top: 0; left: 0; } .container { align-content: center; align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 46rem; } </style> </head> <body> <h1>多設計按鈕樣式</h1> <section class="container"> <button class="btn color-3 material-design" data-color="#f34711">Press me!</button> <button class="btn btn-round color-3 material-design" data-color="#ffffff">Senden</button> <button class="btn btn-border color-3 material-design" data-color="#f34711">Senden</button> <button class="btn btn-border btn-round color-3 material-design" data-color="#f6774f">Senden</button> </section> <script> var canvas = {}, centerX = 0, centerY = 0, color = '', containers = document.getElementsByClassName('material-design'); context = {}, element = {}, radius = 0, requestAnimFrame = function () { return ( this.requestAnimationFrame || this.mozRequestAnimationFrame || this.oRequestAnimationFrame || this.msRequestAnimationFrame || function (callback) { this.setTimeout(callback, 1000 / 60); } ); } (), init = function () { this.containers = Array.prototype.slice.call(this.containers); for (var i = 0; i < this.containers.length; i += 1) { this.canvas = document.createElement('canvas'); this.canvas.addEventListener('click', press, false); this.containers[i].appendChild(this.canvas); this.canvas.style.width ='100%'; this.canvas.style.height='100%'; this.canvas.width = this.canvas.offsetWidth; this.canvas.height = this.canvas.offsetHeight; } }, press = function (event) { color = event.toElement.parentElement.dataset.color; element = event.toElement; context = element.getContext('2d'); radius = 0; centerX = event.offsetX; centerY = event.offsetY; context.clearRect(0, 0, element.width, element.height); draw(); }, draw = function () { context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = color; context.fill(); radius += 2; if (radius < element.width) { requestAnimFrame(draw); } }; init(); </script> </body> </html>