为什么这里的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出来的东西的痕迹不都还在么。