html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span> lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>Title</title><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> .bg {<br /> background: #000;<br /> overflow: hidden;<br /> }<br /> </style><br /> </head><br /> <body class="bg"><br /> <canvas id="canvas-club"></canvas><br /> <script><br /> var c = document.getElementById("canvas-club");<br /> var ctx = c.getContext("2d");<br /> var w = c.width = window.innerWidth;<br /> var h = c.height = window.innerHeight;<br /> var clearColor = ‘rgba(0, 0, 0, .1)’;<br /> function Rippling() {<br /> }<br /> Rippling.prototype = {<br /> init: function (posX,posY) {<br /> this.x = posX;<br /> this.y = posY;<br /> this.w = 3;<br /> this.h = 2;<br /> this.vw = 1;<br /> this.vh = 1;<br /> this.a = 1;<br /> this.va = .96;<br /> },<br /> draw: function () {<br /> ctx.beginPath();<br /> ctx.moveTo(this.x, this.y – this.h / 2);<br /> ctx.bezierCurveTo(<br /> this.x + this.w / 2, this.y – this.h / 2,<br /> this.x + this.w / 2, this.y + this.h / 2,<br /> this.x, this.y + this.h / 2);<br /> ctx.bezierCurveTo(<br /> this.x – this.w / 2, this.y + this.h / 2,<br /> this.x – this.w / 2, this.y – this.h / 2,<br /> this.x, this.y – this.h / 2);<br /> ctx.strokeStyle = ‘hsla(180, 100%, 50%, ‘ + this.a + ‘)’;<br /> ctx.stroke();<br /> ctx.closePath();<br /> this.update();<br /> },<br /> update: function () {<br /> if (this.a > .03) {<br /> this.w += this.vw;<br /> this.h += this.vh;<br /> if (this.w > 1) {<br /> this.a *= this.va;<br /> this.vw *= .98;<br /> this.vh *= .98;<br /> }<br /> } else {<br /> ctx.clearRect(0,0,c.width,c.height);<br /> return false;<br /> }<br /> }<br /> };</p> <p> function anim() {<br /> ctx.fillStyle = clearColor;<br /> ctx.fillRect(0, 0, w, h);<br /> r.draw();<br /> requestAnimationFrame(anim);<br /> };<br /> var r = new Rippling();<br /> window.onclick = function (event) {<br /> function getMousePos(event) {<br /> var e = event || window.event;<br /> var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;<br /> var scrollY = document.documentElement.scrollTop || document.body.scrollTop;<br /> var x = e.pageX || e.clientX + scrollX;<br /> var y = e.pageY || e.clientY + scrollY;<br /> return {‘x’: x, ‘y’: y};<br /> }<br /> r.init(getMousePos().x,getMousePos().y);<br /> }<br /> anim();<br /> </script><br /> </body><br /> </<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>> » 本文来自：前端开发者 » 《Canvas点击产生水波纹效果》 » 本文链接地址：https://www.rokub.com/8850.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册