killnger的专栏

Javascript定时执行代码块方式int:setInterval(func, msec)此方法是每隔一定的时间(msec参数值)调用一次传给它的函数(func参数)，若不主动调用clearInterval(int)取消定时器，则会一直执行下去。function animate(){ // 需执行的代码}// 每秒60帧速率执行let timerId = setInterval(a...

从Javascript动画（一）了解了requestAnimationFrame函数，这一节我们使用这个函数来实现一个简单的动画。第一步：画静止不动的小球html<div id="container"> <canvas id="canvas"></canvas></div&a

上一小节我们实现了一个小球运动，太孤单了，现在我们来给它添加些小伙伴~面向对象编程我们先将编写小球的类，基本就是将上一节小球属性复制过来，只不过我们需在实例化时给它传递参数，用于控制小球属性，毕竟每个小球长一样也不好玩啦。提示： Object.assign 是es6的接口，文章结尾给了个polyfill版本function Ball(options) { var opts = Obje...

上一节结尾说到，当小球数量增加到成千上万时，明显感觉到小球跑的慢了，这节我们来了解下为什么会这样。帧速率动画是由一系列叫做“帧”的图像组成的，这些图像的显示频率就叫做“帧速率”。现在我们来基于上一回的代码做修改，添加显示帧速率的代码，在addBallBtn添加事件监听的代码后面添加显示帧速率的代码如下：/** * 画出帧速率 * @param dt */function drawF...

将上一节更改为基于时间的动画并不复杂，我们只要将Ball类的update方法作一定的更改就可以了。先将Ball类中，小球的默认速度更改600px/svx: 600, // 小球x轴速度 px/svy: 600 // 小球y轴速度 px/s再更改update方法：that.x += that.vx * dt / 1000; ...