ReferenceError：Point is not defined

正如我正在通過畫布教程，我得到錯誤：「點沒有定義」，我的實際輸出不同於預期output.Iam不能用鼠標拖動圓圈。ReferenceError：Point is not defined

 ReferenceError: Point is not defined in logic.js

的index.html

<!DOCTYPE html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 
       <title>Drawing Circles in Canvas</title> 
       <link rel="stylesheet" href="css/style.css"/> 
       </head> 
       <body width="100%" height="100%"> 
        <header> 
         <h1>Drawing in Canvas</h1> 
        </header> 
        <canvas id="game" width="768" height="400"> 
         Sorry, your web browser does not support 
                Canvas content. 
         </canvas> 

         <script src="js/jquery-1.10.2.min.js"> 
                </script> 
         <script src="js/logic.js"></script> 
       </body> 
      </html>

logic.js

    var untangleGame={ 
      circle: [], 
      thinLineThickness: 1, 
      lines: [] 
     }; 
     function Circle(x,y,radius){ 
      this.x=x; 
      this.y=y; 
      this.radius=radius; 
     } 
     function Line(startPoint,endPoint,thickness){ 
      this.startPoint=startPoint; 
      this.endPoint=endPoint; 
      this.thickness=thickness; 
     } 
     function drawcircle(ctx,x,y,radius){ 
      ctx.fillStyle="rgba(200,200,100,.9)"; 
      ctx.beginPath(); 
      ctx.arc(x,y,radius,0,Math.PI*2,true); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
     function connectCircles(){ 
      for(var i=0;i<untangleGame.circle.length;i++){ 
       var startPoint=untangleGame.circle[i]; 
       for(var j=0;j<i;j++){ 
        var endPoint=untangleGame.circle[j]; 
        untangleGame.lines.push(new 
        Line(startPoint,endPoint,untangleGame.thinLineThickness)); 
       } 
      } 
     } 
     function drawLine(ctx,x1,y1,x2,y2,thickness){ 
      ctx.beginPath(); 
      ctx.moveTo(x1,y1); 
      ctx.lineTo(x2,y2); 
      ctx.lineWidth=thickness; 
      ctx.strokeStyle="#cfc"; 
      ctx.stroke(); 
     } 
     function clear(ctx){ 
      ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
     } 
     $(function(){ 
      var canvas=document.getElementById('game'); 
      var ctx=canvas.getContext('2d'); 

      var circleRadius=10; 
      var width=canvas.width; 
      var height=canvas.height; 

      var circlesCount=5; 

      for(var i=0;i<circlesCount;i++){ 
       var x=Math.random()*width; 
       var y=Math.random()*height; 
       drawcircle(ctx,x,y,circleRadius); 
       untangleGame.circle.push(new Circle(x,y,circleRadius)); 
      } 
      connectCircles(); 
      $("#game").mousedown(function(e){ 
       var canvasPosition=$(this).offset(); 
       var mouseX=e.layerX || 0; 
       var mouseY=e.layerY || 0; 

       for(var i=0;i<untangleGame.circle.length;i++){ 
        var circleX=untangleGame.circle[i].x; 
        var circleY=untangleGame.circle[i].y; 
        var radius=untangleGame.circle[i].radius; 
       if(Math.pow(mouseX-circleX,2)+Math.pow(mouseY-circleY,2) 
            <Math.pow(radius,2)){ 
        untangleGame.targetCircle=i; 
        break; 
       } 
      } 
      }); 

      $("#game").mousemove(function(e){ 
       if(untangleGame.targetCircle != undefined){ 
        var canvasPosition=$(this).offset(); 
        var mouseX=e.layerX || 0; 
        var mouseY=e.layerY || 0; 
        var 
        radius=untangleGame.circle[untangleGame.targetCircle].radius; 
        untangleGame.circle[untangleGame.targetCircle]=new 
          Circle(mouseX,mouseY,radius); 
       } 
       connectCircles(); 
      }); 
      $("#game").mouseup(function(e){ 
       untangleGame.targetCircle=undefined; 
      }); 
      setInterval(gameloop,30); 
     }); 
     function gameloop(){ 
      var canvas=document.getElementById('game'); 
      var ctx=canvas.getContext('2d'); 

      clear(ctx); 
      for(var i=0;i<untangleGame.lines.length;i++){ 
       var line=untangleGame.lines[i]; 
       var startPoint=line.startPoint; 
       var endPoint=line.endPoint; 
       var thickness=line.thickness; 

         drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,thickness); 
      } 
      for(var i=0;i<untangleGame.circle.length;i++){ 
       var circle=untangleGame.circle[i]; 
       drawcircle(ctx,point.x,point.y,circle.radius); 
      } 
     }

的style.css

  canvas{ 
     background: #333; 
     }

輸出預期：

總產值有望圖片鏈接 O/p Expected link

來源

2013-11-15 user2983117

圖像鏈接不上來產出預期 – user2983117

你在腳本的末尾有'point.x，point.y' ..但'point'沒有被定義在任何位置 –

看起來像你在gameloop使用point代替circle在for循環

for (var i = 0; i < untangleGame.circle.length; i++) { 
    var circle = untangleGame.circle[i]; 
    drawcircle(ctx, circle.x, circle.y, circle.radius); 
}

演示：Fiddle

來源

2013-11-15 03:47:10

感謝您的幫助，是的，它可以工作，但現在我無法用mo使用 – user2983117

ReferenceError：Point is not defined

回答

相關問題