文字全屏化和动画效果的实现

全屏化

• 全屏化只有用户自己触发才会实现，如果不绑定事件无法实现
  document.onclick = function(){
  title.webkitRequestFullScreen(); //谷歌等内核
  title.mozRequestFullScreen(); //火狐内核
  }

• 以下是全屏的方法
  
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}


使用帧动画

动画可以用 ’ setInterval ’ 或 ’ timeout ’ 的自调实现，也可以用帧动画 ’ requestAnimationFrame ’ 实现(当然，还有canvas动画效果的实现，这里不谈)

这里是部分script代码：
““
var canvas = document.getElementById(‘canvas’);
var cxt = canvas.getContext(‘2d’);

    // 创建小球对象

    var ball = {
        x: 50,
        y: 50,
        r: 30,
        speedX: 5,
        speedY: 2,
        draw: function(){
            cxt.beginPath();
            cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            cxt.closePath();
            cxt.fill();
        },
        move: function (){
            this.x += this.speedX;
            this.y += this.speedY;

            if(this.x >= 500-this.r || this.x <= this.r) {this.speedX *= -1;}
            if(this.y >= 500-this.r || this.y <= this.r){this.speedY *= -1;}
        }
    }
````

• setInterval 实现动画效果，定时器实现动画效果是通过设置间隔时间来实现的，每隔多少毫秒移动坐标
  ““
  setInterval(function(){
  cxt.clearRect(0,0,500,500);
  ball.draw();
  ball.move();
  },10);

  ““

• timeout 本意是 setInterval 的延迟效果，但我们可以通过它的自调实现动画
  
// 使用timeout实现interval的功能，实际上就是自己调用自己
function gameloop(){
cxt.clearRect(0,0,500,500);
ball.move();
ball.draw();
setTimeout(gameloop,10);
}
gameloop();


• requestAnimationFrame 帧动画，帧动画的实现，保证每隔一帧执行一次。两次执行中间的时间间隔不确定，由电脑的性能实现，人眼在16帧每秒以上才会觉得连贯。
  注意：帧动画可以通过利用 ’ 取余运算 ’ 实现事件多少帧执行一次，取消动画的方式和 interval 、 timeout 一样，都有单独的方法，都有把返回值做参数
  ““
  function gameloop(){
  cxt.clearRect(0,0,500,500);
  ball.move();
  ball.draw();

      window.requestAnimationFrame(gameloop);
  
  }
  gameloop();
  
  
  // 取消帧动画
  document.onclick = function(){
      window.cnacelAnimationFrame(a);
  }
  

  ““

多个setInterval的清除

如果我们有多个timer，那么清除的时候我们是否需要使用clearInterval进行一个个的清除呢？

相信大家都有答案，如果多个定时器的清除我们需要多个clearIntervval的话，会造成代码的冗余，一点都不简练。

这里我介绍一种清除全部定时器的方法，通过遍历可以实现全部定时器的清除
““
var timer1 = setInterval(function(){
console.log(‘timer1’);
},300);
var timer2 = setInterval(function(){
console.log(‘timer2’);
},300);
var timer3 = setInterval(function(){
console.log(‘timer3’);
},300);

    window.onclick = function(){
        for(var i =0 ; i < 4; i++){
            clearInterval(i);
        }
    }

““