Question

当我需要他在前面产卵时，这个蓝色圆圈正在那里产卵。有什么不对？是因为画布背景仅加载onmouseover吗？或者因为它是随机的还是因为网格本身不像画布那么大？我真的很困惑。

<!doctype html>
<html>
  <head>
    <title>Ussi l6una</title>
    <script>
      var kohad=new Array();
      var pikkus=1, d=6, kogus=300;

      var ballx=0, step=100;
      var bally=0, step=100;
      var monsterx=(step*parseInt(5*Math.random())), step=100;
      var monstery=(step*parseInt(5*Math.random()));


          function toit(){
            var c=document.getElementById("tahvel");
            var ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.fillStyle = 'darkblue';
            ctx.arc(monsterx+10, monstery+10, 25, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.lineWidth = 0;
            ctx.strokeStyle = '#000000';
          }

          function devouring(){
            if(monsterx==ballx && bally==monstery){
              monsterx=step*parseInt(5*Math.random());
              monstery=step*parseInt(5*Math.random());
              toit();
              cnt++;
              punktid();
            }
          }

      function looKohad(){
         for(var i=0; i<kogus; i++){
            kohad[i]=new Array(pikkus*i, 1200);
         }
      }

      function arvutaUusTagumine(eesmine, tagumine){
         var kaugus=new Array();
         kaugus[0]=eesmine[0]-tagumine[0];
         kaugus[1]=eesmine[1]-tagumine[1];
         var kogukaugus=Math.sqrt(kaugus[0]*kaugus[0]+kaugus[1]*kaugus[1]);
         var nihe=kogukaugus-pikkus;
         var dx=kaugus[0]*nihe/kogukaugus;
         var dy=kaugus[1]*nihe/kogukaugus;  
         return new Array(tagumine[0]+dx, tagumine[1]+dy);       
      }

      function arvutaUuedKohad(){
         console.log(kohad);
         for(var i=1; i<kogus; i++){
            kohad[i]=arvutaUusTagumine(kohad[i-1], kohad[i]);
         }
      }

      function joonistaKohad(g){
         for(var i=0; i<kogus; i++){
            joonistaKoht(g, kohad[i])
         }
      }

      function joonistaKoht(g, koht){
         g.beginPath();
         g.arc(koht[0], koht[1], d, 0, 2*Math.PI, true);
         g.stroke();      
      }

      function hiirLiigub(e){
         var t=document.getElementById("tahvel");
         var g=t.getContext("2d");
         var tahvlikoht=t.getBoundingClientRect();
         kohad[0][0]=e.clientX-tahvlikoht.left;
         kohad[0][1]=e.clientY-tahvlikoht.top;
         arvutaUuedKohad();
         g.strokeStyle="#CC9966";
         g.fillStyle="#CC9966";
         g.clearRect(0, 0, t.width, t.height);
         joonistaKohad(g);
      }
      looKohad();
    </script>
  </head>
  <body
  onLoad="toit();">
  <canvas id="tahvel" width="800" height="800" 
            style="background-color:white" onmousemove="hiirLiigub(event)" onmouseover="this.style.backgroundImage = 'url(./dirt.png)'"></canvas><br />
  </body>
</html>

Answer 1

你好忘了在joonistaKohad（g）之后打电话给toit（）;在主拉环中。
清除画布后，必须重新绘制所有内容顺便说一句好结果。

http://jsbin.com/UVoXOreV/1/

如何将我的绘图放在画布的第一个计划上？

1 个答案: