在我进行画布教程时，出现错误：“未定义点”，并且我的实际输出与预期输出不同。我无法用鼠标拖动圆。
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>
逻辑.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的预期输出
最佳答案
看起来您在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);
}
演示：Fiddle