html5 水波式按钮_HTML5点击按钮水波扩散动画效果

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)