我可以在課堂上修改我的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(); });