运行效果参考：

动画.gif

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.       body{
  7.         /* background-color: black; */
  8.       }
  9.       canvas{
  10.         background: #fff;
  11.       }
  12.     </style>
  13.     <title>Title</title>
  14.     <script>
  15.       window.onload = function(){
  16.         var oC = document.querySelector("#c");
  17.         var oGc = oC.getContext("2d");
  18.         oGc.fillRect(0,0,100,100);
  20.         var rectData = oGc.getImageData(0,0,100,100);
  21.         var w = rectData.width;
  22.         var h = rectData.height;
  25.         var dataC = randomData(w*h,w*h/10);
  26.         var newData = oGc.createImageData(w,h);
  28.         var iNum = 0;
  30.         var timer = setInterval(function () {
  31.           for(var j=0;j<dataC[iNum].length;j++){
  32.             newData.data[4*dataC[iNum][j]]=rectData.data[4*dataC[iNum][j]];
  33.             newData.data[4*dataC[iNum][j]+1]=rectData.data[4*dataC[iNum][j]+1];
  34.             newData.data[4*dataC[iNum][j]+2]=rectData.data[4*dataC[iNum][j]+2];
  35.             newData.data[4*dataC[iNum][j]+3]=rectData.data[4*dataC[iNum][j]+3];
  37.           }
  38.           oGc.putImageData(newData,w,h);
  40.           if(iNum<9){
  41.             iNum++;
  42.           }
  43.           else{
  44.             iNum=0;
  45.             oGc.clearRect(w,h,w,h);
  46.             for(var i=0;i<newData.data.length;i++){
  47.               newData.data[i]=0;
  48.             }
  49.           }
  50.         },200);
  53.         function randomData(allNum,nowNum) {
  54.           var dataA = [];
  55.           var dataB = [];
  56.           for(var i=0;i<allNum;i++){
  57.             dataA.push(i);
  58.           }
  60.           for(var i=0;i<allNum/nowNum;i++){
  61.             var otherData = [];
  62.             for(var j=0;j<nowNum;j++){
  63.               otherData.push(dataA.splice(Math.floor(Math.random()*dataA.length),1));
  64.             }
  65.             dataB.push(otherData);
  66.           }
  67.           return dataB;
  68.         }
  70.       }
  71.     </script>
  72.   </head>
  73.   <body>
  74.     <canvas id="c" width="700" height="400"></canvas>
  75.   </body>
  76. </html>