基于HTML5的小球物理测试系统，附实现原理

这个方法主要功能是每次定时器触发的时候，重新把所有小球绘制到canvas上。具体操作是首先重新画canvas背景（否则在旧位置的小球会保留在canvas上并显示出来），然后遍历保存所有小球的数组，根据每个小球的属性，在canvas上画出具有新位置的小球，并调用之前的updateBallState方法，更新小球的属性，为下次的移动作准备。

  return {
    /* 初始化函数 */
        init: function(canvasId, backgroundColor, friction, gravityValue) {
            if (!CanvasSupport)
                return;

            this.backgroundColor = backgroundColor || "#000";                //背景色，默认为黑色
            this.friction = friction || 0.1;                                 //墙壁摩擦系数，默认为0.1
            this.gravityValue = gravityValue || 0.2;                         //重力系数，默认为0.2
            this.canvasObj = util.$(canvasId);                               //canvas对象
            this.canvasWidth = util.getComputedStyle(this.canvasObj).width;  //canvas高度
            this.canvasHeight = util.getComputedStyle(this.canvasObj).height;//canvas宽度
            this.contextObj = this.canvasObj.getContext('2d');               //2d的context对象
            this.ballArray = [];                                             //保存所有小球的数组


            drawBackground(this.contextObj, this.backgroundColor, this.canvasWidth, this.canvasHeight);
            setInterval(drawBallsToCanvas(this.ballArray, this.contextObj, this.backgroundColor, this.canvasWidth, this.canvasHeight, this.gravityValue, this.friction = 0.1), 33);

        },

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!