canvas實現點選產生放射性效果程式碼例項
下面的程式碼實現了點選頁面的任何一個位置都會產生放射性效果的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .bg { background: #000; overflow: hidden; } </style> </head> <body class="bg"> <canvas id="canvas-club"></canvas> <script> var c = document.getElementById("canvas-club"); var ctx = c.getContext("2d"); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var clearColor = 'rgba(0, 0, 0, .1)'; function Rippling() {} Rippling.prototype = { init: function(posX, posY) { this.x = posX; this.y = posY; this.w = 3; this.h = 2; this.vw = 1; this.vh = 1; this.a = 1; this.va = .96; }, draw: function() { ctx.beginPath(); ctx.moveTo(this.x, this.y - this.h / 2); ctx.bezierCurveTo( this.x + this.w / 2, this.y - this.h / 2, this.x + this.w / 2, this.y + this.h / 2, this.x, this.y + this.h / 2); ctx.bezierCurveTo( this.x - this.w / 2, this.y + this.h / 2, this.x - this.w / 2, this.y - this.h / 2, this.x, this.y - this.h / 2); ctx.strokeStyle = 'hsla(180, 100%, 50%, ' + this.a + ')'; ctx.stroke(); ctx.closePath(); this.update(); }, update: function() { if (this.a > .03) { this.w += this.vw; this.h += this.vh; if (this.w > 1) { this.a *= this.va; this.vw *= .98; this.vh *= .98; } } else { ctx.clearRect(0, 0, c.width, c.height); return false; } } }; function anim() { ctx.fillStyle = clearColor; ctx.fillRect(0, 0, w, h); r.draw(); requestAnimationFrame(anim); }; var r = new Rippling(); window.onclick = function(event) { function getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; return { 'x': x, 'y': y }; } r.init(getMousePos().x, getMousePos().y); } anim(); </script> </body> </html>
相關文章
- canvas 點選產生放射性效果Canvas
- 點選實現顯示密碼效果程式碼例項密碼
- canvas實現煙花燃放效果程式碼例項Canvas
- canvas實現的鋸齒效果程式碼例項Canvas
- canvas實現的鐘表效果程式碼例項Canvas
- canvas實現的驗證碼效果程式碼例項Canvas
- js點選div實現閃爍效果程式碼例項JS
- 利用canvas實現的驗證碼效果程式碼例項Canvas
- canvas實現的雪花飄落效果程式碼例項Canvas
- canvas實現的藍色雨滴效果程式碼例項Canvas
- canvas實現的彈力小球效果程式碼例項Canvas
- 點選回車實現表單提交效果程式碼例項
- canvas火焰效果程式碼例項Canvas
- jquery實現的選項卡效果例項程式碼jQuery
- canvas實現的七巧板效果程式碼例項Canvas
- canvas實現的動態心形效果程式碼例項Canvas
- canvas實現的圓形鐘錶效果程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- canvas實現文字線性漸變效果程式碼例項Canvas
- JavaScript點選投票效果程式碼例項JavaScript
- js實現的垂直選項卡效果程式碼例項JS
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- canvas實現的賽貝爾曲線效果程式碼例項Canvas
- canvas實現的小球四壁碰撞效果程式碼例項Canvas
- jQuery點選滑出層效果程式碼例項jQuery
- canvas實現的刮刮樂程式碼例項Canvas
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- canvas水位進度效果程式碼例項Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas
- canvas田字格效果程式碼例項Canvas
- canvas繪製圓環效果程式碼例項Canvas
- canvas螞蟻線效果程式碼例項Canvas
- jquery實現的點選進行倒數計時效果程式碼例項jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- js實現的產生隨機數程式碼例項JS隨機