Canvas点击产生水波纹效果

由前端开发者 · 2018年11月6日15:17:44

摘要：html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"&……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> .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> </<a href="https://www.rokub.com/category/html" title="html">html</a>>

» 本文来自：前端开发者 » 《Canvas点击产生水波纹效果》

» 本文链接地址：https://www.rokub.com/8850.html

» 您也可以订阅本站：https://www.rokub.com

Canvas点击产生水波纹效果

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

Canvas点击产生水波纹效果

You may also like...

bounce.js：创建有趣的CSS3动画丨前端开发者

canvas 蓝胖子

开发工具：sublime Text 3实用功能和常用快捷键

发表评论 取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复