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

　　于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,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. python 系统相关操作

    1.文件 open()代开文件或者创建文件 fout=open('oops.txt','wt') print('Oops, I created a file.',file=fout) fout.clo ...

  2. python数据可视化、数据挖掘、机器学习、深度学习 常用库、IDE等

    一.可视化方法 条形图 饼图 箱线图(箱型图) 气泡图 直方图 核密度估计(KDE)图 线面图 网络图 散点图 树状图 小提琴图 方形图 三维图 二.交互式工具 Ipython.Ipython not ...

  3. DP专题·二

    1.hdu 1260 Tickets 题意:有k个人,售票员可以选择一个人卖,或者同时卖给相邻的两个人.问最少的售票时间. 思路:dp[i] = min(dp[i - 1] + singlep[i], ...

  4. python3 requests模块

    一.Requests用法: 1.发送请求: 1).请求类型:req_obj = requests.get("https://www.baidu.com")requests支持多种请 ...

  5. git使用基础

    一.git介绍 git是由 Linus 开发的一种“分布式版本控制”软件,而在此之前,版本控制基本上都是“集中式版本控制”,如:CVS,SVN 等.两者的区别: 1. "集中式版本控制系统& ...

  6. Spring 之 @ComponentScan以及mock Spring MVC

    [ @ComponentScan] 纠正:可以成功 Autowired 的原因是我在另外一个 config 文件中扫描了根包,这会顺带扫描所有该包的子包 还有,,上面的写法容易出错,建议这样写, @C ...

  7. 一步一步教你读懂NET中IL

    .NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是说,它们的指令集(Instruction Set)都是采用堆叠运算的方式:执行时的资料都是先放在堆叠中, ...

  8. 20145235李涛《网络对抗》Exp8 Web基础

    基础问答 什么是表单 可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 表单包括两个部分:一部分是HTML源代码用于描述表单(例如,域,标签和用户在页面上看见的按钮),另一部分是脚本 ...

  9. 字符串的hash匹配

    如果要比较字符串是否相等,首先想到的是KMP算法,但是hash更加简洁易于编写,hash的目的是把一串字符转化成一个数字,用数字来比较是否相等.我让mod=912837417 Base=127,防止h ...

  10. caffe python lmdb读写

    caffe中可以采取lmdb健值数据库的方式向网络中输入数据. 所以操作lmdb就围绕"键-值"的方式访问数据库就好了. Write 我们可以采用cv2来读入自己的图像数据,采用d ...