canvas实现点击带水纹的按钮

 

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

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

 

posted @ 2017-04-21 18:30  快乐的咸鱼  阅读(2704)  评论(0)  编辑  收藏  举报