canvas实现点击波纹效果
2017-04-17
闲着无聊用canvas做了一个点击波纹效果展示，最初想法是这样；然后实现了，但是样子跑偏了。。。。
1.根据callback生成requestAnimationFrame动画,requestAnimationFrame 请求动画帧原理setTimeout；
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);//callback为绘制canvas的fun
}
);
} (),
关于requestAnimationFrame全称动画帧请求回调函数列表即在已定义的动画帧里不断执行callback；我个人认为等同于在setTimeout或setInterval下不断去调用执行绘制canvas的方法。但是requestAnimFrame可以使浏览器基于页面情况，CPU负荷能力等因素自行决定最佳的动画帧速率的特性使得其优于定时器机制。
css3对于动画的强大实现能力，两项之间的比较：
2.从点击点追加canvas画布
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.style.opacity='0.16';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
3.点击并且获取需要的数据，如点击坐标、元素大小、颜色
press = function (event) {
element = event.toElement;
context = element.getContext('2d');
radius = 0;
//鼠标点击位置
centerX = event.offsetX;
centerY = event.offsetY;
context.clearRect(0, 0, element.width, element.height);//清空指定矩形框的像素，(x,y)起始点坐标，类似于橡皮擦
draw();
},
4.绘制圆形，并且执行动画
draw = function () {
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2* Math.PI, false);
console.log(111);
context.fillStyle = colorS();
context.fill();
radius += 2;
// 通过判断半径小于指定宽度，不断绘制 radius += 2 的圆形
if (radius < element.width/3) {
requestAnimFrame(draw);
}else{
setTimeout(context.clearRect(0, 0, element.width, element.height),800);
}
};
4.随机取颜色值rgb色值是十进制，10–16的进制转换
function colorS(){
var s = "#";
function num(star,end){//随机取整
var n = Math.random()*end+star;
return parseInt(n);
}
s+=num(0,255).toString(16);
s+=num(0,255).toString(16);
s+=num(0,255).toString(16);
return s;
};
点击效果点击主页左侧图片；