Javascript 画布上绘制的人物出现了片刻，但随后消失了_Javascript_Canvas_Coffeescript

Javascript 画布上绘制的人物出现了片刻，但随后消失了

javascript canvas coffeescript

Javascript 画布上绘制的人物出现了片刻，但随后消失了,javascript,canvas,coffeescript,Javascript,Canvas,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()

我想在画布上画星星。我使用常量值成功，如下所示：

源代码如下：

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

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

<!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>

在下一步中，我试图让它能够设置行数

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

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

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

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

<!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>

完整的html页面源代码如下：

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

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

<!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>


身体{
边际：0px；
填充：0px；
}
#我的画布{
边框：1px实心#9C9898；
}
（功能（）{
变量、线、根；
行=函数（r、s、上下文）{
context.beginPath（）；
上下文。移动到（250250）；
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=typeof导出！==“未定义”&&exports！==null？导出：此；
root.star=函数（）{
变量画布，上下文，i，n，_i；
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
n=document.fm.int.value；
if（isInt（n））{
对于（i=_i=1；1需要更好的答案
路人给了我一个很好的建议
以下是旧资料来源：
<form name="fm" onsubmit="star()">



以下是新资料来源：
<form name="fm" action="javascript:star()">



这个很好用。谢谢你，路人。说实话，我不明白为什么这个代码很好用而最后一个代码不
因为表单已提交且页面已重新加载（由于缺少操作
属性）？