<canvas id="cavas" width="" height="" style="border: 1px solid;"></canvas>

<!--高宽不能写在style里-->

    var cas=document.querySelector('#cavas');    var ctx=cas.getContext('2d');

    var n;

    function rgb(){

        var r=Math.floor(Math.random()*);

        var g=Math.floor(Math.random()*);

        var b=Math.floor(Math.random()*);

        return 'rgb('+r+','+g+','+b+')';

    }

    setInterval(function(){      //定时器

        for (var i=;i<;i++) {

            for (var j=;j<;j+=) {    //循环行

                i%==?n=j:n=j+;　　　　//如果是偶数行,n=j,如果是奇数行,n=j+1

                ctx.fillStyle=rgb();   //添加颜色

                ctx.fillRect(*n,*i,,);

            }

        }

    },);
　　//也可以用下面的方法

　　 setInterval(function(){      //定时器

        for (var i=0;i<8;i++) {

            for (var j=0;j<8;j++) {    //循环行

　　　　　　　　　　if (i%2==0&&j%2==0) {    //偶数行
　　　　　　　　　　　　ctx.fillRect(100*i,100*j,100,100);
　　　　　　　　　　} else if(i%2!=0){　　　　　//奇数行
　　　　　　　　　　　　ctx.fillRect(100*i,100*(2*j+1),100,100);
　　　　　　　　　　}
　　　　　　　　　　ctx.fillStyle=rgb();

            }

        }

    },200);