HTML5点击按钮水波扩散动画效果

HTML5点击按钮水波扩散动画效果1382
HTML5实现点击水波扩散效果是一款基于HTML5 Canvas的动画按钮,每一个按钮都是一个canvas画布,这就很灵活,你可以在canvas绘制任意你喜欢的东西作为按钮的背景画面,并且,还可以有动画特效。
var canvas = {},    centerX = 0,    centerY = 0,    color = '',    containers = document.getElementsByClassName('material-design')    context = {},    element = {},    radius = 0,    requestAnimFrame = function () {      return (        window.requestAnimationFrame       ||         window.mozRequestAnimationFrame    ||         window.oRequestAnimationFrame      ||         window.msRequestAnimationFrame     ||         function (callback) {          window.setTimeout(callback, 1000 / 60);        }      );    } (),          init = function () {      containers = Array.prototype.slice.call(containers);      for (var i = 0; i < containers.length; i += 1) {        canvas = document.Element('canvas');        canvas.addEventListener('click', press, false);        containers[i].appendChild(canvas);        canvas.style.width ='100%';        canvas.style.height='100%';        canvas.width  = canvas.offsetWidth;        canvas.height = 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();

也许你还喜欢