javascript - 为什么这里的clearRect要放在第一行？

Question

var dom = document.getElementById("clock");

     var ctx = dom.getContext("2d");
     var width = ctx.canvas.width; 
     var height = ctx.canvas.height;
     var r = width / 2;

function drawBackground(){

           **ctx.save();**
           .......省略一些代码
           }

function drawHour(hour,minute){

        .......省略一些代码

}
function drawMinute(minute,second){

     .......省略一些代码

}
function drawSecond(second){

  .......省略一些代码
          }

function drawDot(){
.......省略一些代码
}

        function draw(){
         **ctx.clearRect(0,0,width,height);**
         var time = new Date(),
             hour = time.getHours(),
             minute = time.getMinutes(),
             second = time.getSeconds();
     drawBackground();
     drawHour(hour,minute);
     drawMinute(minute,second);
     drawSecond(second);
     drawDot();
     **ctx.restore();**
     }
     draw();
     setInterval(draw,1000);

为什么ctx.clearRect(0,0,width,height)要放在draw()函数第一行？
那不是一调用就被清除了？那还怎么画？

Answer 1

不清除掉原来canvas中的内容，那之前所有draw出来的东西的痕迹不都还在么。

Answer 2

画新的内容前要先清理一下画板。不然后画上去的内容有叠加。

有透明通道的层叠加在一起后，效果最明显。

不是清理了就不能画，而是说清理了为了能更爽的画。

Answer 3

为什么要清除画板？是为了去掉叠加的、旧的样式或者状态，为什么要放在第一行？js的解析机制本来就是从上往下的顺序（除了声明和调用），在执行函数、解析方法的时候仍然是以从上往下的顺序先后执行的，你的需求就是先先清理画布再重新绘制，那就是要放在第一行，再在后面添加新的方法啊