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

　　于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,so,扒代码!

完整代码在最后,是经过我的改进优化滴.

在这里先分析一下功能,就两个核心点.

　　1.获取当前鼠标点击位置,注意这里要用 offsetX/Y,不能用screenX/Y或者clientX/Y,他们三个的区别可以上网搜一下,这里就不说了.

　　2.以获取到的点击位置为中心点,利用html的canvas画布画半透明的圆,这里为了体现水纹的动态扩展效果,要设置一个定时器或者使用浏览器自带的

requestAnimationFrame函数(时间间隔根据不同浏览器而定,通常在60fps),在使圆的半径动态的扩展,并且不能超过按钮宽度.

　　即下面的代码:

  1.     draw = function () {
  2.               context.beginPath();
  3.               context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  4.               context.fillStyle = color;
  5.               context.fill();
  6.               radius += 2;
  7.               if (radius < element.width) {
  8.                 requestAnimFrame(draw);
  9.               }
  10.             };

完整代码:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6.   <meta charset="UTF-8">
  7.  
  8.   <title>HTML5实现点击水波扩散效果</title>
  9.  
  10.  <style>
  11.  
  12. * {
  13.   box-sizing: border-box;
  14.   outline: none;
  15. }
  16.  
  17. body {
  18.   font-family: 'Open Sans';
  19.   font-size: 100%;
  20.   font-weight: 300;
  21.   line-height: 1.5em;
  22.   text-align: center;
  23. }
  24.  
  25. h1 {
  26.   color: #666666;
  27.   font-size: 2rem;
  28.   line-height: 1.5em;
  29.   margin: 2em 0 2em 0;
  30. }
  31.  
  32. .box {
  33.   margin: 1rem;
  34.   width: 18.75rem;
  35. }
  36. .box img {
  37.   width: 100%;
  38. }
  39.  
  40. .btn {
  41.   border: none;
  42.   color: white;
  43.   overflow: hidden;
  44.   margin: 1rem;
  45.   padding: 0;
  46.   text-transform: uppercase;
  47.   width: 150px;
  48.   height: 40px;
  49. }
  50.  
  51. .btn.color-3 {
  52.   background-color: #f6774f;
  53. }
  54.  
  55. .btn-border.color-3 {
  56.   background-color: transparent;
  57.   border: 2px solid #f6774f;
  58.   color: #f6774f;
  59. }
  60.  
  61. .btn-round {
  62.   border-radius: 10em;
  63. }
  64.  
  65. .material-design {
  66.   position: relative;
  67. }
  68. .material-design canvas {
  69.   opacity: 0.25;
  70.   position: absolute;
  71.   top: 0;
  72.   left: 0;
  73. }
  74.  
  75. .container {
  76.   align-content: center;
  77.   align-items: flex-start;
  78.   display: flex;
  79.   flex-direction: row;
  80.   flex-wrap: wrap;
  81.   justify-content: center;
  82.   margin: 0 auto;
  83.   max-width: 46rem;
  84. }
  85.  
  86. </style>
  87. </head>
  88.  
  89. <body>
  90.  
  91.   <h1>多设计按钮样式</h1>
  92. <section class="container">
  93.    <button class="btn color-3 material-design" data-color="#f34711">Press me!</button>
  94.  
  95.    <button class="btn btn-round color-3 material-design" data-color="#ffffff">Senden</button>
  96.  
  97.    <button class="btn btn-border color-3 material-design" data-color="#f34711">Senden</button>
  98.  
  99.    <button class="btn btn-border btn-round color-3 material-design" data-color="#f6774f">Senden</button>
  100.  
  101. </section>
  102.   <script>
  103.     var canvas = {},
  104.             centerX = 0,
  105.             centerY = 0,
  106.             color = '',
  107.             containers = document.getElementsByClassName('material-design');
  108.             context = {},
  109.             element = {},
  110.             radius = 0,
  111.  
  112.             requestAnimFrame = function () {
  113.               return (
  114.               this.requestAnimationFrame       ||
  115.               this.mozRequestAnimationFrame    ||
  116.               this.oRequestAnimationFrame      ||
  117.               this.msRequestAnimationFrame     ||
  118.               function (callback) {
  119.                 this.setTimeout(callback, 1000 / 60);
  120.               }
  121.               );
  122.             } (),
  123.  
  124.             init = function () {
  125.               this.containers = Array.prototype.slice.call(this.containers);
  126.               for (var i = 0; i < this.containers.length; i += 1) {
  127.  
  128.                 this.canvas = document.createElement('canvas');
  129.                 this.canvas.addEventListener('click', press, false);
  130.  
  131.                 this.containers[i].appendChild(this.canvas);
  132.                 this.canvas.style.width ='100%';
  133.                 this.canvas.style.height='100%';
  134.                 this.canvas.width  = this.canvas.offsetWidth;
  135.                 this.canvas.height = this.canvas.offsetHeight;
  136.               }
  137.             },
  138.  
  139.             press = function (event) {
  140.               color = event.toElement.parentElement.dataset.color;
  141.               element = event.toElement;
  142.               context = element.getContext('2d');
  143.               radius = 0;
  144.               centerX = event.offsetX;
  145.               centerY = event.offsetY;
  146.               context.clearRect(0, 0, element.width, element.height);
  147.               draw();
  148.             },
  149.  
  150.             draw = function () {
  151.               context.beginPath();
  152.               context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  153.               context.fillStyle = color;
  154.               context.fill();
  155.               radius += 2;
  156.               if (radius < element.width) {
  157.                 requestAnimFrame(draw);
  158.               }
  159.             };
  160.  
  161.     init();
  162.  
  163.   </script>
  164. </body>
  165. </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. C#：当前时间转换成文件名

    DateTime.Now.ToFileTime().ToString(); 结果是一个字符串,类似:131238643554094913.

  2. 236. Lowest Common Ancestor of a Binary Tree（最低公共祖先，难理解）

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  3. Wannafly交流赛1 _A_有理数 【水】

    Wannafly交流赛1 A有理数 [水] 链接:https://www.nowcoder.com/acm/contest/69/A 来源:牛客网 题目描述 有一个问题如下: 给你一个有理数v,请找到 ...

  4. LightOJ - 1138 (二分+阶乘分解)

    题意:求阶乘尾部有Q(1 ≤ Q ≤ 108)个0的最小N 分析:如果给出N,然后求N!尾部0的个数的话,直接对N除5分解即可(因为尾部0肯定是由5*2构成,那么而在阶乘种,2的因子个数要比5少,所以 ...

  5. reading list

    Machine  Learning1. Deep Learningimagenet classification with deep convolutional neural networks. 20 ...

  6. eclipse中自动加载源码的方法

    1.选中项目右键properties--java build path--Libraries--Add External class Folder 找到项目将项目添加进去 2.然后就是这样 3.OK

  7. 【Java】仿真qq尝试：聊天界面 && 响应用户输入

    需求分析: 逐步完善一个“qq仿真”程序. 参考: 1.文本框与文本区:http://www.weixueyuan.net/view/6062.html 2.java布局:http://www.cnb ...

  8. 拓扑排序（附LeetCode题目）

    算法期中考到一题关于拓扑序的题目,觉得很值得一写. 1.什么是拓扑序? 对一个有向无环图进行拓扑排序,假如图中存在一条从顶点A到顶点B的路径,则拓扑序中顶点A出现在顶点B的前面.要注意的是,这是对有向 ...

  9. Java集合类初始容量、加载因子、扩容增量

    当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全部复制到新的内存上,这无疑使效率大大降低. 加载因 ...

  10. python 利用PIL库进行更改图片大小的操作

    python 是可以利用PIL库进行更改图片大小的操作的,当然一般情况下是不需要的,但是在一些特殊的利用场合,是需要改变图片的灰度或是大小等的操作的,其实用python更改图片的大小还是蛮简单的,只需 ...