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

　　于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,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. mysql监控报警工具

    #!/usr/bin/env python # coding:utf-8 import MySQLdb import requests, json import time url = "ht ...

  2. OpenOCD SWD调试stm32f0

    参考:http://www.stmcu.org.cn/module/forum/thread-610998-1-2.html

  3. Keepalived 服务器状态监测

    keepalived简介: keepalived是一个类似于layer3, 4 & 5交换机制的软件,也就是我们平时说的第3层.第4层和第5层交换.Keepalived的作用是检测web服务器 ...

  4. 关于JSON字符串

    向客户端返回JSON字符串有两种方法: 1.纯手工拼接: result.append("{"); result.append("\"timu\":\& ...

  5. 【转】Matlab使用过程中内存不足问题的总结

    使用matlab过程中经常会出现内存不足的问题,这里转载一篇来自http://blog.csdn.net/xiaojidan2011/article/details/8089532 的博文,解决这一问 ...

  6. 【Github教程】史上最全github使用方法：github入门到精通（转自eoeandroid.com）

    本文来源:http://www.eoeandroid.com/thread-274556-1-1.html 另附经典教程网址 :http://wuyuans.com/2012/05/github-si ...

  7. Asp.Net MVC4+EF6 Code First 权限管理系统 源码下载

    这个权限管理系统是基于在@TZHSWEET 的权限管理系统之上做的修改.@TZHSWEET 那个是DB first. 这个是Code First.源码下载:http://download.csdn.n ...

  8. Windows7中pagefil.sys和Hiberfil.sys文件删除与转移

    第一步.在开始的功能表的搜索栏里输入 cmd,然后在搜索结果中的 cmd 按下右键,点选[以系统管理员身分运行] 第二步.在命令提示符窗口里输入下面命令然后按下Enter: powercfg –h o ...

  9. DPDK l3fwd

    l3fwd负责三层转发,比l2fwd要复杂点. /*- * BSD LICENSE * * Copyright(c) 2010-2014 Intel Corporation. All rights r ...

  10. MyEclipse安装aptana插件， 8.5之前版本 和 之后版本， MyEclipse10安装aptana

    MyEclipse8.5安装aptana插件说明: 1.在myeclipse的安装目录下,有个common文件夹,建一个myplugIns,此目录下建aptana_update_024747目录 2. ...