Question

嗨我有一个简单的脚本，可以在屏幕上放置随机点。使用Javascript和CSS

<!doctype html><html><head>
<meta charset="utf-8">
<title>Ran Dots</title>

<style>
    body{
    background-color:#C82022;
    }
    .dot {
        position: absolute;
        width: 2px;
        height: 2px;
        background: black;
    }
</style>

</head><body>

<form id="form1" name="form1" method="post" action="">
  <label for="textfield">num of dots</label>
  <input type="text" id="num_of_dots" value="0" />
</form>

<script>
//
function createDot(x, y){
    var elem = document.createElement("div");
    elem.setAttribute("class", "dot");
    elem.setAttribute("style", "left:"+x+"px;top:"+y+"px;");
    document.getElementsByTagName("body")[0].appendChild(elem);
    return elem;
}
//

var Count_Num_Of_Dots = 0;
//
function Add_Dot(){

        if(Count_Num_Of_Dots < 1000000){

            createDot(Math.floor(Math.random()*1900), Math.floor(Math.random()*870 + 40));
            Count_Num_Of_Dots ++;
            document.getElementById('num_of_dots').value ++;

        }else{// stop timer

            clearInterval(My_Timer_Var);

        }
}
//

// Timer
var My_Timer_Var = setInterval(function(){ Add_Dot() }, .05);
</script>

</body></html>

任何人都可以告诉我：

什么不可避免地导致它减速到大约30,000点？
我怎样才能保持这些点有效且高速运转到数百万个点？
也许有更好的方法可以做到这一点？

JSFiddle：Click Here

谢谢

问候。

Answer 1

它不仅仅是一个以canvas开头的骨架，而不是DOM。

<html>
 <head>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

JavaScript和CSS - 在屏幕上放置随机点太慢

1 个答案: