0

我是 HTML5 和网络编程的新手。我已经掌握了一些基础知识，并开始研究基于画布的动画。但是，在尝试创建基于数字时钟的动画时，我没有成功。该代码在 JSLint 上正确验证，并且可以正常工作，但没有显示任何内容。

这是来源http://jsfiddle.net/kuydB/

这是 JavaScript 源代码：

var filterStrength = 20;
var frameTime = 0, lastLoop = new Date(), thisLoop;
var canvas, ctx;


function startWatch() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    var currentDateTime = new Date();

    var hours = currentDateTime.getHours();
    if (hours < 10) {
        hours = "0" + hours;
    }

    var minutes = currentDateTime.getMinutes();
    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    var seconds = currentDateTime.getSeconds();
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    var timeString = hours + ':' + minutes + ':' + seconds;

    ctx.font = 'bold ' + canvas.width / 4 + 'px sans-serif';

    var dim = ctx.measureText(timeString);

    var y = (canvas.height - 30) / 2;
    var x = (canvas.width - dim.width) / 2;

    ctx.fillText(timeString, x, y);   

      var thisFrameTime = (thisLoop=new Date()) - lastLoop;
      frameTime+= (thisFrameTime - frameTime) / filterStrength;
      lastLoop = thisLoop;

}

$(document).ready(function() {
    canvas = $('#canvas')[0];
    ctx = canvas.getContext('2d');
    setIntervalTimer(startWatch,1000);
    var fpsOut = document.getElementById('fps');
    setInterval(function(){
      fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
    },1000);
});
4

1 回答 1

2

工作小提琴

var filterStrength = 20;
var frameTime = 0, lastLoop = new Date(), thisLoop;
var canvas, ctx;


function startWatch() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    var currentDateTime = new Date();

    var hours = currentDateTime.getHours();
    if (hours < 10) {
        hours = "0" + hours;
    }

    var minutes = currentDateTime.getMinutes();
    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    var seconds = currentDateTime.getSeconds();
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    var timeString = hours + ':' + minutes + ':' + seconds;

    ctx.font = 'bold ' + canvas.width / 4 + 'px sans-serif';

    var dim = ctx.measureText(timeString);

    var y = (canvas.height - 30) / 2;
    var x = (canvas.width - dim.width) / 2;

    ctx.fillText(timeString, x, y);   

      var thisFrameTime = (thisLoop=new Date()) - lastLoop;
      frameTime+= (thisFrameTime - frameTime) / filterStrength;
      lastLoop = thisLoop;

}

$(document).ready(function() {
    canvas = $('#canvas')[0];
    ctx = canvas.getContext('2d');
    setInterval(startWatch,1000); //here you had a syntax error you typed setIntervalTimer instead of setInterval
    var fpsOut = document.getElementById('fps');
    setInterval(function(){
      fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
    }, 1000);
});
​
于 2013-01-01T06:33:28.010 回答