一般屏幕的刷新频率是60Hz,每秒刷新60次，每一秒绘制60帧画面，requestAnimationFrame方法提示浏览器重新绘制动画，效果类似于setTimout,定时时间是浏览器根据自己的性能自行设置的，能够保证一个最优帧速率，绘制更流畅完整的动画。
海葵效果如下图所示：
1545545070815.gif
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var deltaTime ; // 记录绘制相隔两帧的时间间隔
var lastTime = 0; // 记录上一帧的绘制时间
var alpha = 0; // 用于计算海葵头部横坐标
var posX = []; //存放每条海葵的横坐标
var posY = []; //存放每条海葵的纵坐标
var num = 12;
function initPosX() { // 初始化横纵坐标
for(var i = 0; i < num; i++ ){
posX[i] = 15*i + Math.random()*15;
posY[i] = 30 + Math.random()*15
if(i === 0) { //处理第一条海葵展示不全
posX[i] += 15;
}
}
}
function draw(){
var c=document.getElementById("myCanvas");
alpha += deltaTime*0.001;
var headX=15*Math.sin(alpha); // headX的值[-15, 15]
var cxt=c.getContext("2d");
cxt.save(); //使用cxt.save和cxt.restore表示cxt上的属性只在当前代码区间中有效
cxt.clearRect(0,0,200,100); //清除指定区域绘制的图像
cxt.strokeStyle="#3b154e";
cxt.globalAlpha=0.6;
cxt.lineWidth = 15;
cxt.lineCap = 'round';
for(var i = 0; i < num ; i++){
cxt.beginPath();
cxt.moveTo(posX[i], 100);
cxt.quadraticCurveTo(posX[i],65,posX[i]+headX,posY[i]); //绘制二次贝塞尔曲线
cxt.stroke();
}
cxt.restore();
}
function render(){
var now = new Date();
deltaTime = now -lastTime;
lastTime = now;
window.requestAnimationFrame(render);
draw();
}
function init() {
initPosX();
render();
}
init();
</script>
</body>
</html>
网友评论