0

对于我正在做的一个项目，我需要使用 arc 函数和 lineTo 函数在画布上绘制一个太阳系，并在它们之间一键按下切换。我想我很接近我可以切换一次但我不能切换回原来的。很抱歉有大量代码，但我已经为此工作了几个小时，我不再记得什么是重要的。

    if (window.addEventListener) 
{
    window.addEventListener( 'load', initialise, false);
    window.addEventListener('keydown',onKeyDown, false);
}

var canvas;
var context;
var angle = 0;
var time = 20;
var paused = false;
var timer;
var drawStyle = drawArc();

function onKeyDown(event) 
{ 
    var keyCode = event.keyCode;
    switch(keyCode)
    { 
        case 80: //p
        togglePause();
        break; 
    }
    switch(keyCode)
    {
        case 75: //k
        toggleDrawStyle();
        break; 
    }
        switch(keyCode)
    {
        case 70: //f
        speedUp();
        break; 
    }
    switch(keyCode)
    {
        case 82: //r
        speedDown();
        break; 
    }
}

function toggleDrawStyle()
{
    if(drawStyle == drawArc())
    {
        drawStyle = drawLine();
    }
    else if(drawStyle == drawLine())
    {
        drawStyle = drawArc();
    }
}

function speedUp()
{
    time = time / 2;
}

function speedDown()
{
        time = time * 2;
}

function togglePause() 
{
    if (!paused)
    {
        clearInterval(timer);
        paused = true;
    }
    else 
    {
        timer = setInterval(drawArc, time);
        timer = setInterval(drawLine, time);
        paused = false;
    }
}


function initialise() 
{
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext)
    { 
        alert('Error: no canvas.getContext!'); 
        return; 
    }

    context = canvas.getContext('2d'); 
    if (!context)
    { 
        alert('Error: failed to getContext!'); 
        return; 
    }

    timer = setInterval(drawArc, time);

}

function drawArc() 
{ 
    clearCanvas();
    context.fillStyle = "#000000";
    context.fillRect(0, 0, canvas.width, canvas.height);
    incrementAngle();
    context.save();
    //draw the sun
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(convertToRadians(angle));
    circle(0, 0, 30, "#ffaa00");

    //draw mercury
    context.save();
    context.rotate(convertToRadians(angle)*1.5);
    moveCirlce(1/6, 1/6 , 30 , 30, "#555555");
    context.restore();

    //draw venus
    context.save();
    context.rotate(convertToRadians(angle)*1.25);
    moveCirlce(1/5, 1/5, 40, 40, "#aa0011");
    context.restore();

    // draw earth
    context.save();
    context.rotate(convertToRadians(angle));
    moveCirlce(0.3, 0.3, 55, 55, "#0077ff");
    context.restore();

    //draw the moon
    context.save();
    context.rotate(convertToRadians(angle));
    context.translate(55, 55);
    context.rotate(convertToRadians(angle) * 2);
    moveCirlce(1/15, 1/15, 10, 10, "#555555");
    context.restore();

    //draw mars
    context.save();
    context.rotate(convertToRadians(angle) *0.9);
    moveCirlce(1/3, 1/3, 80, 80, "#ff0000");
    context.restore();

    //draw jupiter
    context.save();
    context.rotate(convertToRadians(angle)* 0.75);
    moveCirlce(2/3, 2/3, 110, 110, "#cc8811");
    context.restore();

    //draw sautrn
    context.save();
    context.rotate(convertToRadians(angle)*0.55);
    moveCirlce(17/30, 17/30, 140, 140, "#dd7722");
    context.restore();

    //draw uranus
    context.save();
    context.rotate(convertToRadians(angle)*0.3);
    moveCirlce(14/30, 14/30, 170, 170, "#4444ff");
    context.restore();

    //draw neptune
    context.save();
    context.rotate(convertToRadians(angle)*0.2);
    moveCirlce(11/30, 11/30, 190, 190, "#9999ff");
    context.restore();
    context.restore();


}

function drawLine()
{
    clearCanvas();
    context.fillStyle = "#000000";
    context.fillRect(0, 0, canvas.width, canvas.height);
    incrementAngle();
    context.save();
    //draw sun
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(convertToRadians(angle));
    lineCircle(0, 0, 30, "#ffaa00");    

    //draw mercury
    context.save();
    context.rotate(convertToRadians(angle)*1.5);
    moveLineCirlce(1/6, 1/6 , 30 , 30, "#555555");
    context.restore();

    //draw venus
    context.save();
    context.rotate(convertToRadians(angle)*1.25);
    moveLineCirlce(1/5, 1/5, 40, 40, "#aa0011");
    context.restore();

    // draw earth
    context.save();
    context.rotate(convertToRadians(angle));
    moveLineCirlce(0.3, 0.3, 55, 55, "#0077ff");
    context.restore();

    //draw the moon
    context.save();
    context.rotate(convertToRadians(angle));
    context.translate(55, 55);
    context.rotate(convertToRadians(angle) * 2);
    moveLineCirlce(1/15, 1/15, 10, 10, "#555555");
    context.restore();

    //draw mars
    context.save();
    context.rotate(convertToRadians(angle) *0.9);
    moveLineCirlce(1/3, 1/3, 80, 80, "#ff0000");
    context.restore();

    //draw jupiter
    context.save();
    context.rotate(convertToRadians(angle)* 0.75);
    moveLineCirlce(2/3, 2/3, 110, 110, "#cc8811");
    context.restore();

    //draw sautrn
    context.save();
    context.rotate(convertToRadians(angle)*0.55);
    moveLineCirlce(17/30, 17/30, 140, 140, "#dd7722");
    context.restore();

    //draw uranus
    context.save();
    context.rotate(convertToRadians(angle)*0.3);
    moveLineCirlce(14/30, 14/30, 170, 170, "#4444ff");
    context.restore();

    //draw neptune
    context.save();
    context.rotate(convertToRadians(angle)*0.2);
    moveLineCirlce(11/30, 11/30, 190, 190, "#9999ff");
    context.restore();
    context.restore();
}

function convertToRadians(degree) 
{
    return degree*(Math.PI/180);
}

function incrementAngle() 
{
    angle++;
}

function clearCanvas()
{
    canvas.width = canvas.width;
}
function circle(x, y, r , col)
{
    context.beginPath();
    context.arc(x, y, r, 0, 2*Math.PI);
    context.fillStyle = col;
    context.fill();
}

function moveCirlce(a, b, x, y, col)
{
    context.save();
    context.translate(x, y);
    context.scale(a, b);
    circle(0, 0, 30, col);
    context.restore();
}

function lineCircle(a, b, r, col)
{
    var theta = Math.PI * 2 / 9;
    for (var i = 0; i <= 9; i = i + 1) 
    {
        var angle = theta * i;
        var x = a + r * Math.cos(angle);
        var y = b + r * Math.sin(angle);
        if (i == 0) 
        {
            context.moveTo(x,y);
        }
        else 
        {
            context.lineTo(x,y);
        }
    }
    context.fillStyle = col;
    context.fill();
}

function moveLineCirlce(a, b, x, y, col)
{
    context.save();
    context.translate(x, y);
    context.scale(a, b);
    lineCircle(0, 0, 30, col);
    context.restore();
}

initialise();
drawArc();
4

1 回答 1

1

你写的 switch 语句只不过是一种奇怪的方式来编写一堆，if (condition) do_statements; 所以这不是问题（尽管这确实意味着你没有按预期使用 switch 语句；如果这是一个年级的作业，这可能意味着一些扣除）。

一个明确的迹象表明，您使用togglePause触发setInterval， drawArc然后通过触发覆盖计时器setIntervalid drawLine。这意味着每当您尝试清除Interval 时，您只会清除drawLine.

你也有一个drawStyle变量，但你并没有真正将它用于任何事情，因为 drawArc 和 drawLine 不返回任何值。

所以，一些提示...

  • 为您的 drawStyle 变量分配适当的东西......无论您是否使用某些标志或实际功能本身，我都不在乎。
  • 更好地处理您的 setInterval 逻辑。提示：通过一些调整，您可以在timer = setInterval(function(){drawStyle();}, time);任何地方使用 just use 。
  • 您的加速/减速功能已损坏。你的太阳系应该通过改变时间增量来工作——也就是说，不仅仅是将角度增加 1，而是增加一些你可以改变的可变数量。
  • 最后，在你搞定逻辑之后，修复你的 switch 语句
于 2012-12-07T16:57:52.887 回答