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

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

    1.导入Python SQLITE数据库模块 Python2.5之后,内置了SQLite3,成为了内置模块,这给我们省了安装的功夫,只需导入即可~ import sqlite3 2. 创建/打开数据库 ...

  2. NHibernate之配置文件属性说明

    一.NHibernate配置所支持的属性 属性名 用途 dialect 设置NHibernate的Dialect类名 - 允许NHibernate针对特定的关系数据库生成优化的SQL 可用值: ful ...

  3. 转：Oracle中的日期和字符串互相转换

    TO_DATE格式(以时间:2007-11-02   13:45:25为例)          Year:             yy two digits 两位年                显 ...

  4. ThinkPHP框架基础3

    连接数据库 把convertion.php数据库相关的设置复制到config.php 在config.php做数据库连接配置,设置好数据 制作model模型 a)        model本身就是一个 ...

  5. html 基础--一般标签

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  6. netty2---服务端和客户端

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  7. hadoop09----线程池

    java并发包 1.java并发包介绍 线程不能无限制的new下去,否则系统处理不了的. 使用线程池.任务来了就开一runable对象. concurrent 包开始不是jdk里面的,后来加入到jd ...

  8. 【Head First Servlets and JSP】笔记

    1.谈到服务器的时候,可能是指物理主机(硬件),也可能是指Web服务应用(软件). 2.谈到客户的时候,通常指人类用户,或者是浏览器应用,或者两者都包括,浏览器应用做些什么?发送请求.解释HTML和呈 ...

  9. Spring注解(事务)

    spring操作数据库 jdbc <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> & ...

  10. mapreduce&GFS&bigtable learning

    之前在学习udf的时候接触到了mapreduce,感觉很酷,于是学习了一下,看了mapreduce和GFS的论文,但是没有总结,只是看了一遍 准备利用在学校的时间,学习一下bigtable,然后再认真 ...