Question

对于我正在进行的项目，我需要使用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();

Answer 1

你写的switch语句只不过是编写一堆if (condition) do_statements;的奇怪方式，所以这不是问题（虽然意味着你没有使用切换声明按预期;如果这是作业的作业，这可能意味着一些扣除）。

明确指出某些事情是拙劣的，因为togglePause用[{1}}触发setInterval，然后用drawArc同时触发setInterval来覆盖定时器ID }。这意味着无论何时尝试clearInterval，您只需清除drawLine的间隔。

你也有一个drawLine变量，但你并没有真正使用它，因为drawArc和drawLine不会返回任何值。

所以，有些提示......

为drawStyle变量分配一些正确的东西......无论你是否使用某些旗帜或实际的功能本身，我都不在乎。
更好地处理你的setInterval逻辑。提示：通过一些调整，您可以在任何地方使用drawStyle。
您的加速/减速功能已损坏。你的太阳系应该通过不同的时间增量来工作 - 也就是说，不是仅仅将角度增加1，而是将它增加一些可以变化的可变量。
最后，在您完成逻辑后，Fix your switch statement

html5画布切换绘制功能

1 个答案: