我可以在课堂上修改我的DOM吗？

Question

这真的很简单，但我似乎无法弄清楚如何做到这一点。我在Chrome中从控制台得到“Uncaught TypeError：this.resizeCanvas不是函数”。该代码旨在调整绘制模拟时钟的画布大小。

<编辑> 粘贴代码的全部，而不仅仅是protion让我头疼 < /编辑>

JAVASCRIPT

function Hands(canvas) 
{ 
    this.angle = 0; 
    this.beginX = canvas.width/2; 
    this.beginY = canvas.height/2; 
    this.endX = 0; 
    this.endY = 0; 
    this.radius = 0; 
    this.length = 0; 
    this.modLength = 0; 
    this.color = ''; 
    this.lineCap = ''; 
    this.lineWidth = 0; 
    this.rotation = (Math.PI * 2)/4; 

    this.draw = function(ctx) 
    { 
     this.length = this.radius - this.modLength; 

     this.endX = this.beginX + Math.cos(this.angle - this.rotation) * this.length; 
     this.endY = this.beginY + Math.sin(this.angle - this.rotation) * this.length; 

     ctx.beginPath(); 
     ctx.moveTo(this.beginX, this.beginY); 
     ctx.lineWidth = this.lineWidth; 
     ctx.strokeStyle = this.color; 
     ctx.lineCap = this.lineCap; 
     ctx.lineTo(this.endX, this.endY); 
     ctx.stroke(); 
    }; 
} 

function AnalogClock() 
{ 
    this.canvas = document.getElementById("clockface"); 
    this.context = this.canvas.getContext('2d'); 

    this.margin = 30; 
    this.rotation = (Math.PI * 2)/4; // Rotate 0 rad to be at top of circle 
    this.centerX = this.canvas.width/2; 
    this.centerY = this.canvas.height/2; 

    this.secondHand = new Hands(this.canvas); 
    this.secondHand.lineWidth = 3; 
    this.secondHand.modLength = 100; 
    this.secondHand.beginX = this.centerX; 
    this.secondHand.beginY = this.centerY; 
    this.secondHand.color = '#ff0000'; 
    this.secondHand.radius = this.canvas.height/2.031; 

    this.minuteHand = new Hands(this.canvas); 
    this.minuteHand.lineWidth = 10; 
    this.minuteHand.modLength = 100; 
    this.minuteHand.beginX = this.centerX; 
    this.minuteHand.beginY = this.centerY; 
    this.minuteHand.color = '#101010'; 
    this.minuteHand.radius = this.canvas.height/2.031; 

    this.hourHand = new Hands(this.canvas); 
    this.hourHand.lineWidth = 16; 
    this.hourHand.modLength = 175; 
    this.hourHand.beginX = this.centerX; 
    this.hourHand.beginY = this.centerY; 
    this.hourHand.color = '#101010'; 
    this.hourHand.radius = this.canvas.height/2.031; 

    this.drawSecondHand = function(s) 
    { 
     this.secondHand.angle = (Math.PI * 2) * (s/60); 
     this.secondHand.draw(this.context); 
    }; 

    this.drawMinuteHand = function(m) 
    { 
     this.minuteHand.angle = (Math.PI * 2) * (m/60); 
     this.minuteHand.draw(this.context); 
    }; 

    this.drawHourHand = function(h) 
    { 
     this.hourHand.angle = (Math.PI * 2) * (h/12); 
     this.hourHand.draw(this.context); 
    }; 

    this.drawDot = function(x, y, radius, radians, color) 
    { 
     this.context.beginPath(); 
     this.context.arc(x, y, radius, 0, Math.PI * 2, false); 
     this.context.fillStyle = color; 
     this.context.fill(); 
    }; 

    this.drawClockFace = function() 
    { 
     var distance = this.centerY - 80; 

     for(i = 0; i < 60; i++) 
     { 
      var targetX = this.centerX + Math.cos(((Math.PI * 2) * (i/60)) - this.rotation) * distance; 
      var targetY = this.centerY + Math.sin(((Math.PI * 2) * (i/60)) - this.rotation) * distance; 

      this.drawDot(targetX, targetY, 3, this.minuteHand.color); 
     } 

     for(i = 0; i < 12; i++) 
     { 
      var targetX = this.centerX + Math.cos(((Math.PI * 2) * (i/12)) - this.rotation) * distance; 
      var targetY = this.centerY + Math.sin(((Math.PI * 2) * (i/12)) - this.rotation) * distance; 

      this.drawDot(targetX, targetY, 8, this.hourHand.color); 
     } 
    }; 

    this.resizeCanvas = function() 
    { 
     this.canvas.width = window.innerWidth - this.margin; 
     this.canvas.height = window.innerHeight - this.margin; 
    }; 

    this.draw = function() 
    { 
     var now = new Date(); 

     this.resizeCanvas(); 
     this.drawClockFace(); 
     this.drawHourHand(now.getHours()); 
     this.drawMinuteHand(now.getMinutes()); 
     this.drawSecondHand(now.getSeconds()); 

     this.drawDot(this.centerX, this.centerY, 10, this.secondHand.color); // Center dot 
    }; 
} 


/******** 
LOAD APP 
*********/ 

// ctx.translate(0.5, 0.5); // Anti-aliasing 

var analogClock = new AnalogClock(); 

function tick() 
{ 
    setInterval(analogClock.draw, 1000); 
    analogClock.draw(); 
} 

document.addEventListener("DOMContentLoaded", function(){ tick(); }); 

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body { 
       background: #fefefe; 
      } 

      canvas { 
       background: #fefefe; 
      } 
     </style> 
    </head> 
    <body id="root"> 
     <canvas id="clockface"></canvas> 
     <script src="clock.js"></script> 
    </body> 
</html> 

Answer 1

您需要更多这样的代码你的滴答......

function tick() { 
    analogClock.draw(); 
    //setInterval(tick, 1000); - WRONG 
    setTimeout(tick, 1000); // Or preferably use requestAnimationFrame. 
} 

window.addEventListener("load", function() { 
    tick(); 
}); 

然而，当我这样做，它运行很差在Firefox。也许requestAnimationFrame会更好地工作，但有些东西是锁定它，我不能完全放在手指上。但是，这确实解决了当前resizeCanvas问题未定义的问题。当你删除勾号，只是调用resizeCanvas或直接绘制，他们工作正常。一旦滴答正确循环，它也可以正常工作。

我怀疑性能问题是由于在每个tick上调用画布的大小调整引起的。你可能不想这样做。您只需调用该窗口，如果窗口调整大小。

生成的时钟倒过来。在你手中的对象，这样可以解决它...

this.rotation = -Math.PI/2; 

Answer 2

变化clock.resize()到myClock.resize()。

Answer 3

你的问题的根源在于，通过功能和setTimeout称为setInterval总是有当前window的this对象。当一个对象的方法，使用这些功能前，你必须使用一个包装函数或使用apply()

//wrapper 
setTimeout(function(){analogClock.draw();}, 1000); 

或

//apply 
setTimeout(function(){analogClock.draw.apply(analogClock), 1000); 

相反，你应该写：

function tick() 
{ 
    analogClock.draw(); 
} 

document.addEventListener("DOMContentLoaded", function(){ setInterval(tick, 1000); }) 

或

function tick() 
{ 
    analogClock.draw(); 
    setInterval(analogClock.draw.apply(analogClock), 1000); 
} 

document.addEventListener("DOMContentLoaded", function(){ tick(); });