0

当我浏览画布教程时，我收到错误：“点未定义”并且我的实际输出与预期输出不同。我无法用鼠标拖动圆圈。

       ReferenceError: Point is not defined in logic.js

索引.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>

逻辑.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);
            }
        }

样式.css

         canvas{
         background: #333;
         }

预期输出：

图像链接的预期输出 O/p 预期链接

4

1 回答 1

2

看起来你正在使用point而不是circle在for循环中gameloop

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

演示：小提琴

于 2013-11-15T03:47:10.563 回答