html5畫布開關繪製功能

對於我正在進行的項目，我需要使用弧函數和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();

來源

2012-12-07 Nigel Brook

哈哈，這就是爲什麼它是使用有意義的名稱和代碼註釋的部分是一個好主意，指定的相關性和使用。 – knownasilya

你的switch語句，如寫的，只不過是一個奇怪的方式越寫一堆if (condition) do_statements;所以這不是問題（儘管它確實意味着你不使用switch語句預期;如果這是一個成績的作業，這可能意味着一些扣除）。

清楚地表明，什麼是糞肥是你togglePause火災setInterval與drawArc然後還發射setInterval與drawLine覆蓋計時器ID。這意味着每當您嘗試clearInterval時，您只會清除drawLine的時間間隔。

你也有一個drawStyle變量，但你並沒有真正使用它，因爲drawArc和drawLine不返回任何值。

所以，一些提示...

分配正確的東西你drawStyle變量......你是否無法使用一些標誌或實際函數本身，我不在乎。
更好地處理您的setInterval邏輯。提示：通過一些調整，你可以在任何地方使用timer = setInterval(function(){drawStyle();}, time);。
您的加速/減速功能已損壞。你的太陽能系統應該通過改變時間增量來工作 - 也就是說，不是隻增加角度1，而是增加一些可變的變量。
最後，你得到後的邏輯制定出來的，Fix your switch statement

來源

2012-12-07 16:57:52 JayC

html5畫布開關繪製功能

回答

相關問題