简述帧频率跟计时器的区别及原理,并用帧频率的方式实现一个小球移动。
Javascript 239
简述帧频率跟计时器的区别及原理,并用帧频率的方式实现一个小球移动。
// 获取canvas标签
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 时间轴
var timer = 0;
var deg = Math.PI / 180;
var x1 = 100;
var y1 = 100;
var y2 = 300;
var r = 20;
function run() {
// 帧频率
var a = requestAnimationFrame(run);
// console.log(a);
timer++;
// console.log(timer);
canvas.width = canvas.width;
x1 += 2;
ctx.beginPath();
ctx.arc(x1, y1, r, 0, 360 * deg);
ctx.strokeStyle = '2';
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
}
run();