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

　　于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,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. Linux用户、群组及权限

    由于对文件的操作需要切换到相应文件夹下进行,所以对文件内容的修改,最基本的是需要其文件夹执行的权限. 文件夹的读权限(read)可以独立行使,但是对文件夹内容的写权限(对其内文件的新建.删除.重命名) ...

  2. appcmd应用

    appcmd资料: http://www.jb51.net/article/36024.htm 官方文档:https://docs.microsoft.com/zh-cn/iis/get-starte ...

  3. 对象序列化与反序列化local class incompatible

    无论eclipse还是idea(默认关闭序列化提示,需手动打开),都可以自动生成相应的序列号,分为两类1L,XXXL. 当然如果不指定,系统也会自动生成,但是存在隐性风险 ,不同的编译器对同一个对象可 ...

  4. PAT 天梯赛 L1-002 【递归】

    题目链接 https://www.patest.cn/contests/gplt/L1-002 题意 给出一个数字 和一个字符 画出 可用数字下的最大沙漏,并且输出剩余没用掉的符号数 思路 可以先打一 ...

  5. HDU 3966 Aragorn's Story (树链剖分入门题)

    树上路径区间更新,单点查询. 线段树和树状数组都可以用于本题的维护. 线段树: #include<cstdio> #include<iostream> #include< ...

  6. h5打开App的方法。

    在浏览器中: 法1: location.href = `${scheme}`;//location跳转App是几乎所以情况都支持的. 法2: var ifr = document.createElem ...

  7. samba 4.7.16 安装配置详解

    系统:Centos 7.4 x64位 服务版本:samba-4.7.1.samba-client-4.7 Samba 简介 Samba 是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服 ...

  8. FTP vsftp 安装、管理

    FTP简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为文传协议,用户Internet上的控制文件的双向传输. FTP的主要作用,就是让用户链接上一个远 ...

  9. 20145109 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 S.O.L.I.D原则: ...

  10. adplayer移植【转】

    本文转载自:https://blog.csdn.net/qq361294382/article/details/50525412 这两天做madplayer移植,由于是刚装的ubuntu14.04,所 ...