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画布开关绘制功能

回答

相关问题