2012-12-07 5 views
0

프로젝트에서 arc 함수와 lineTo 함수를 사용하여 캔버스에 태양계를 그려야하고 버튼을 한 번 눌러 전환해야합니다. 나는 내가 한 번 바뀔 수 있다고 생각하지만 원래대로 되돌릴 수는 없다. 방대한 코드 블록을 가져 주어서 죄송합니다. 몇 시간 동안이 작업을 해왔으므로 더 이상 중요한 것을 기억할 수 없습니다.html5 캔버스 스위치 드로잉 함수

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

Fix your switch statement이 하하, 그건 밖으로했다. – knownasilya

답변

1

귀하의 스위치 문, 기괴한 방법에 불과하므로 그 문제가 (이 아니다 if (condition) do_statements;의 무리를 쓸 수없는 기록으로 을 수행하지만 의도 한대로 switch 문을 사용하지 않는 것을 의미; 이것이 학년의 숙제 인 경우, 이는 약간의 공제를 의미 할 수도 있음).

뭔가가 쓰레기인지 명확한 표시는 togglePause 화재 drawArcsetInterval 다음도 drawLinesetInterval을 발사하여 타이머 ID를 덮어 쓰기 때문이다. 즉, clearInterval을 시도 할 때마다 drawLine의 간격 만 지워집니다.

또한 변수는 drawStyle이지만 drawArc 및 drawLine은 값을 반환하지 않으므로 아무 것도 사용하지 않습니다.

그래서, 당신의 drawStyle 변수에

  • 지정 뭔가 적절한 힌트는 ... ... 일부 플래그 또는 실제 기능 자체를 사용하는지 여부, 난 상관 없어.
  • setInterval 논리를보다 잘 처리하십시오. 힌트 : 몇 가지 개조로 어디서나 timer = setInterval(function(){drawStyle();}, time);을 사용할 수 있습니다.
  • 속도 상승/감속 기능이 작동하지 않습니다. 당신의 태양계는 변화하는 시간을 변화 시켜서 일해야합니다. 즉, 단지 각도를 1 씩 증가시키는 대신 변화시킬 수있는 가변적 인 양만큼 증가시켜야합니다. 당신이 얻을 후
  • 마지막으로, 논리는 관련성 및 사용을 지정, 의미있는 이름과 코드의 코멘트 섹션을 사용하는 것이 좋습니다 이유