2012-09-18 42 views
1

我想在畫布上畫出明星。我具有恆定值成功如下:畫布上畫的圖出現一會兒,但隨後消失

スクリーンショット(2012-09-18 13.57.53)

的源代碼是下面:

line = (r, s, context) -> 
    context.beginPath() 
    context.moveTo(250, 250) 
    context.lineTo(
     250 + r * Math.cos(s * 2 * Math.PI), 
     250 + r * Math.sin(s * 2 * Math.PI) 
    ) 
    context.stroke() 

window.onload = -> 
    canvas = document.getElementById("myCanvas") 
    context = canvas.getContext("2d") 

    for i in [1..10] 
     line(200, i/10, context) 
    return 

在下一步驟中,我試圖它能夠設置行數。

スクリーンショット(2012-09-18 14.13.45)

的CoffeeScript的源代碼如下:

line = (r, s, context) -> 
    context.beginPath() 
    context.moveTo(250, 250) 
    context.lineTo(
     250 + r * Math.cos(s * 2 * Math.PI), 
     250 + r * Math.sin(s * 2 * Math.PI) 
    ) 
    context.stroke() 

isInt = (n) -> 
    (n % 1) == 0; 

root = exports ? this 
root.star = -> 
    canvas = document.getElementById("myCanvas") 
    context = canvas.getContext("2d") 
    n = document.fm.int.value 
    if(isInt(n)) 
     for i in [1..n] 
      line(200, i/n, context) 
     return 
    else 
     alert("is not integer") 
     return 

完整的HTML頁面源代碼如下:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 

    (function() { 
     var isInt, line, root; 

     line = function(r, s, context) { 
     context.beginPath(); 
     context.moveTo(250, 250); 
     context.lineTo(250 + r * Math.cos(s * 2 * Math.PI), 250 + r * Math.sin(s * 2 * Math.PI)); 
     return context.stroke(); 
     }; 

     isInt = function(n) { 
     return (n % 1) === 0; 
     }; 

     root = typeof exports !== "undefined" && exports !== null ? exports : this; 

     root.star = function() { 
     var canvas, context, i, n, _i; 
     canvas = document.getElementById("myCanvas"); 
     context = canvas.getContext("2d"); 
     n = document.fm.int.value; 
     if (isInt(n)) { 
      for (i = _i = 1; 1 <= n ? _i <= n : _i >= n; i = 1 <= n ? ++_i : --_i) { 
      line(200, i/n, context); 
      } 
     } else { 
      alert("is not integer"); 
     } 
     }; 

    }).call(this); 

    </script> 
    </head> 
    <body> 
    <form name="fm" onsubmit="star()"> 
     Integer: 
    <input type="text" name="int" size="5" /> 
    <input type="submit" value="Draw"> 
    </form> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 
    </body> 
</html> 

然後出現一個短暫的瞬間明星,但隨後的明星消失。我如何保持星星的顯示?

謝謝你的好意。

+1

由於在提交表單並重新加載頁面(由於缺乏'action'屬性) ? – Passerby

回答

0

更好的答案通緝

路人告訴了我一個很好的建議。下面

老來源:

<form name="fm" onsubmit="star()"> 

下面是新中源:

<form name="fm" action="javascript:star()"> 

這工作得很好。謝謝,路人。說實話,我不明白爲什麼這個代碼工作得很好,最後的代碼不是......

スクリーンショット(2012-09-18 14.44.34)