JS 动画覆盖自身而不是替换

Question

我有一个使用 Raphaël 库的数字时钟代码，它会打印自己而不是每次都替换自己，有谁知道如何编辑代码以便替换而不是重写？

HTML 文件中引用的 JS 文件：

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
var display = paper.text(200, 200, dig).attr({text:dig});
 }
  function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
    }
 setInterval(function(){
 startTime();
 },1000);
 };

HTML 文件:

<!DOCTYPE html>
<html>
<head>
<script src="digital.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"> </script>

</head>

</html>

谢谢

Answer 1

这不是真正的动画，因为您绘制的是时钟图像。

paper.text 正在做的是每秒在 canvas 上绘制一个新文本，覆盖已经存在的文本。

使用 display.attr('text', dig); 而不是您可以编辑现有文本。

这是更正后的代码：

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
var display = paper.text(200, 200, "00:00:00").attr({text:"00:00:00"});
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
display.attr('text', dig);
}
function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
}
setInterval(function(){
  startTime();
},1000);
};

JS 动画覆盖自身而不是替换

JS animation writes over itself instead of replacing

javascript

html

animation

raphael