咱今天在闲逛网页时,看到一个点击带水纹的按钮特效,尼玛,写的还挺好,先看效果:

　　于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,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>

canvas实现点击带水纹的按钮的更多相关文章

  1. WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  2. 【传】玩转Android---UI篇---ImageButton(带图标的按钮)

    原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...

  3. 去除IE10自带的清除按钮

    最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...

  4. 添加类似navigationController自带的返回按钮

    添加类似navigationController自带的返回按钮,效果如下: 一.UINavigationcontroller自带的navigationBar 是无法添加左箭头的返回按钮的 在网上搜索了 ...

  5. [转]WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  6. WPF开发随笔收录-带递增递减按钮TextBox

    一.前言 今天分享一下如何实现带递增递减按钮的TextBox控件 二.正文 1.之前的博客分享了一篇自定义XamlIcon控件的文章,这次就直接在那个项目的基础上实现今天这个自定义控件 2.首先添加两 ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. selenium依次点击页面的删除按钮

    需要依次点击页面的删除按钮,如下图: @Test public static void FaBu() { TestMenuJump.jumpExam(driver); TestMenuJump.jum ...

  9. 点击Cell中的按钮时，如何取所在的Cell

    4.点击Cell中的按钮时,如何取所在的Cell:-(void)OnTouchBtnInCell:(UIButton *)Btu{CGPoint point = btn.center;point = ...

随机推荐

  1. java 获取request参数集

    request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...

  2. 算法：LRU（最近最少使用）

    算法:LRU(最近最少使用) 本文参考自小灰文章:https://mp.weixin.qq.com/s/B5xiVeW22ZumbI9KfrYJSg LRU算法 什么是LRU算法 LRU算法又称最近最 ...

  3. BZOJ 3689: 异或之

    字典树可以$o(logn)查找第k大$ 使用$可持久化Trie 区间查找第k大,然后首先把每个数异或之后的最小丢进小根堆中,然后一个一个取出,取出后就再丢次小,一共取k次$ 总的时间复杂度为$O(kl ...

  4. mybatis 复习笔记02

    1. 一对一查询: 1). 实体类: 2). 定义resultMap <!-- 订单查询关联用户的resultMap 将整个查询的结果映射到cn.itcast.mybatis.po.Orders ...

  5. [转]Markdown 公式指导手册（包含LaTeX）

    Cmd Markdown 公式指导手册 本文为转载文章,并且由于LaTeX的可能不能全部兼容,所以可能有部分公式无法在博客园显示,可以移步原网站. 本文固定链接: https://www.zybulu ...

  6. jq限制字符个数

    <script> $(document).ready(function () { //限制字符个数 $(".box-right .title a").each(func ...

  7. idea绿色版+谷歌浏览器绿色版——设置打开jsp文件

    首先我们的工具有 1.idea绿色版 2.Chrome绿色版 3.JavaJDK 4.Tomcat绿色版 文件放在那里都可以 1.idea设置默认打开Chrome 2.idea设置选择Tomcat和J ...

  8. js实现继承的方式

    [原文] 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // ...

  9. CocoaPods学习系列4——进阶用法

    这篇文章,记录一下CocoaPods的进阶用法. 进阶用法主要体现在.podspec文件和Podfile的配置上. .podspec文件的进阶配置 以官方的一个.podspec文件示例细说: Pod: ...

  10. javascript练习题·（1）

    1.参数集合是什么? (function(){ return typeof arguments; })(); 的结果是? typeOf只能以字符串的形式返回数据类型 js中包括6种数据类型--Numb ...