javascript - 我可以在类中修改 DOM 吗？

Question

这真的很简单，但我似乎不知道如何做到这一点。我从 Chrome 的控制台收到“Uncaught TypeError: this.resizeCanvas is not a function”。该代码旨在调整我在其中绘制模拟时钟的 Canvas 的大小。

<编辑>粘贴整个代码，而不仅仅是让我头疼的部分

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 或直接绘制时，它们可以正常工作。一旦蜱虫正确循环，它也可以正常工作。

我怀疑性能问题是由每次更新时调用 Canvas 大小调整引起的。你可能不想这样做。您只需要在窗口大小调整时调用它。

顺便说一句，最终的时钟是颠倒的。在你的 Hands 对象中，这会纠正它......

this.rotation = -Math.PI / 2;