我是编程的初学者，我想进行黑洞模拟，我不能使用矢量作为坐标来绘制对象（并且我希望这样，以便以后可以使用矢量为它们设置动画），这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test trou noir</title>
<script>
var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
function init (){
var G = 6.67e-11, //gravitational constant
c = 3e8, //speed of light (m/s)
M = 12e31, // masseof the blackhole in kg (60 solar masses)
Rs = (2 * G * M) / 9e16, //Schwarzchild radius
pixel_Rs = Rs / 1e3,// scaled radius
canvas = document.getElementById ("space");
ctx = canvas.getContext ('2d');
drawCircle();
blackhole = new Ball (pixel_Rs, new Vector (700, 400), "black" );
blackhole.draw (ctx);
};
function Ball (radius, pos2D, color, vx, vy){
this.radius = radius;
this.pos2D = pos2D;
this.color = color;
this.vx = vx;
this.vy = vy;
};
Ball.prototype.draw = function (ctx){
ctx.fillStyle = this.color;
ctx.beginPath ();
ctx.arc ( pos2D, this.radius, 0, 2*Math.PI);
ctx.closePath ();
ctx.fill();
};
function drawCircle (ctx){
canvas = document.getElementById ("space");
ctx = canvas.getContext ('2d');
for (var i = 0; i<200; i++){
circle = new Ball (5,new Vector( Math.floor (Math.random()*1400), Math.floor (Math.random()*800)), "grey");
circle.draw (ctx)
circles.push (circle);
}
};
function Vector2D (x,y){
this.x = x;
this.y= y;
}
Vector2D.prototype = {
length: function (){
return this.x*this.x + this.y*this.y;
},
add: function (vec){
return new Vector2D (this.x + vec.x, this.y + vec.y);
},
subtract: function (vec){
return new Vector2D (this.x - vec.x, this.y - vec.y);
},
decrementBy: function (vec){
this.x -= vec.x;
this.y -= vec.y;
}
};
window.onload = init;
</script>
<style>
body {
background-color:#021c36 ;
margin: 0px;}
</style>
</head>
<body>
<canvas id ="space", width = "1400", height = "800">
</canvas>
</body>
</html>
现在，我认为这是因为arc（）方法没有特定的坐标，但是我该如何实现矢量坐标，以便在画布上绘制一些东西？如果有人有一个想法，那也很棒，如果有人对如何使用向量为100个对象设置动画有一些提示，那也很棒。非常感谢
更新后，我创建了功能更新，但无法使其正常工作，下面是代码：
function update (){for (var i = 0; i<200; i++){var vec2D = new Vector2D (Math.floor (Math.random()*1400), Math.floor (Math.random()*800));circle = new Ball (5,vec2D.x,vec2D.y, "grey");circle.draw (ctx)circles.push (circle);var distance = Math.sqrt (((vec2D.x-700)*(vec2D.x-700))+((vec2D.y400)* (vec2D.y-400)));if (distance > pixel_Rs){var delta = new Vector2D(1,1);var forceDirection = Math.atan2(vec2D.y-700,vec2D.x-400);delta.x += Math.cos(forceDirection)*3 ;delta.y += Math.sin(forceDirection)*3;vec2D.x += delta.x;vec2D.y += delta.y;requestAnimationFrame (update); }
}
};
我暂时没有力气就做到了，但是我无法使它起作用，你知道为什么吗？
PS：对不起，代码，我的编辑不想正常工作:(
最佳答案
用矢量绘制。
// defining
var Vec = function(x,y){
this.x = x;
this.y = y;
}
// creating
var vec2D = new Vec(100,100);
// Using
ctx.arc(vec2D.x, vec2D.y, radius, 0, Math.PI *2);
要为矢量设置动画，您需要每秒对其进行多次更新。现代浏览器提供了一项功能来帮助您。
当准备好另一帧时，
requestAnimationFrame(yourRenderFuntion)将调用yourRenderFunction。要使用该功能，您需要创建一个更新功能，该功能可以绘制所有图形，并在完成后请求下一帧。function update(time){ // Time is passed by requestAnimationFrame
// code to do the drawing and animation.
// request another frame
requestAnimationFrame(update);
}
// to start it
requestAnimationFrame(update);
然后，您需要做动作。我将创建第二个矢量来保存每帧的增量变化。
var delta = new Vec(1,1);
然后在更新函数中将力添加到增量中并将其添加到位置矢量中
// get direction of force
var forceDirection = Math.atan2(vec2D.y-blackHole.pos.y,vec2D.x-blackHole.pos.x);
// get magnitude of force
var force = getForce(vec2D); // get force of gravity you write that function
// apply that to the delta
delta.x += Math.cos(forceDirection) * force;
delta.y += Math.sin(forceDirection) * force;
// then update the position
vec2D.x += delta.x; // do it for both x and y axis
vec2D.y += delta.y;
然后，您可以在下一个位置绘制对象。