javascript - html5 キャンバススイッチ描画関数

Question

私が取り組んでいるプロジェクトでは、アーク関数と lineTo 関数を使用してキャンバス上に太陽系を描画する必要があり、それらの間のボタンを 1 つ押して切り替えます。私は近いと思います。一度切り替えることはできますが、元に戻すことはできません。膨大なコードブロックで申し訳ありませんが、私はこれに何時間も取り組んできましたが、何が重要か思い出せません。

    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();

score 1 · Accepted Answer

書かれているように、あなたのswitchステートメントは、問題ではないようにたくさん書くための奇妙な方法にすぎませif (condition) do_statements; ん（ただし、意図したとおりにswitchステートメントを使用していないことを意味します。これが学年の宿題である場合、これはいくつかの控除を意味します）。

何かがマックであるという明確な兆候は、あなたがでtogglePause発砲setIntervalし、次にも発砲する drawArcことによってタイマーIDを上書きすることです。これは、clearIntervalを試行するたびに、の間隔のみをクリアすることを意味します。setIntervaldrawLinedrawLine

変数もありdrawStyleますが、drawArcとdrawLineは値を返さないため、実際には何にも使用していません。

だから、いくつかのヒント...

drawStyle変数に適切なものを割り当てます...フラグを使用するか、実際の関数自体を使用するかどうかは関係ありません。
setIntervalロジックをより適切に処理します。timer = setInterval(function(){drawStyle();}, time);ヒント：いくつかの調整を加えるだけで、どこでも使用できます。
スピードアップ/スローダウン機能が壊れています。太陽系は、時間の増分を変化させることによって機能する必要があります。つまり、角度を1だけ増分するのではなく、変更可能な可変量だけ増分します。
最後に、ロジックが完成したら、switchステートメントを修正します

javascript - html5 キャンバス スイッチ描画関数

1 に答える 1

Related

Reference

javascript - html5 キャンバススイッチ描画関数