canvas制作的按钮点击水波扩散效果，怎么扩散效果怎么加速

Question

Press me!

<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;
    }
    .btn {
        border: none;
        display: inline-block;
        color: white;
        overflow: hidden;
        margin: 1rem;
        padding: 0;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
    }
    .btn.color-1 {
        background-color: #426fc5;
    }
    .material-design {
        position: relative;
    }
    .material-design canvas {
        opacity: 0.25;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<script>
    var canvas = {},
centerX = 0,
centerY = 0,
color = '',
containers = document.getElementsByClassName('material-design'),
context = {},
element = {},
radius = 0,

// 根据callback生成requestAnimationFrame动画
requestAnimFrame = function(){
    return (
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}(),
// 为每个指定元素生成canves
init = function(){
    containers = Array.prototype.slice.call(containers);
    for(var i = 0; i < containers.length; i += 1){
        canvas = document.createElement('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;
    // 通过判断半径小于元素宽度，不断绘制 radius += 2 的圆形
    if(radius < element.width){
        requestAnimFrame(draw);
    }
};

init();

</script>

Answer 1

你是想问加速效果？你代码中不是有个requestAnimFrame方法吗，它里面的计时器下的callback（draw）就是一个重复绘制的方法，你改一下这个计时器的时间，如：1000 / 60改为1000/100试试吧，再不明显改成1000/500看看