如何使用画布和javascript设置100个圆的动画？_Javascript_Html_Canvas

如何使用画布和javascript设置100个圆的动画？

javascript html canvas

如何使用画布和javascript设置100个圆的动画？,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试创建一个黑洞模拟，它将显示一个黑洞和100个圆圈，它们以重力降低的速度离开黑洞。这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test trou noir</title> <script> var canvas = document.getElementById ("space"

我正在尝试创建一个黑洞模拟，它将显示一个黑洞和100个圆圈，它们以重力降低的速度离开黑洞。这是我的密码：

<!DOCTYPE html>
   <html lang="en">
<head>
 <meta charset="utf-8" />
 <title>test trou noir</title>
 <script>
var canvas = document.getElementById ("space");
var ctx = canvas.getContext ('2d');
var blackhole;
var circle = new Array();

window.onload = init;

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 

  blackhole = new Ball (pixel_Rs, 700, 400, "black");
  blackhole.draw ();
};

function Ball (radius, posX, posY, color){
 this.radius = radius;
  this.posX = posX;
  this.posY = posY;
  this.color = color;
} 
Ball.prototype.draw = function (ctx){
  var ctx = canvas.getContext ('2d');
  ctx.fillStyle = this.color;
  ctx.beginPath ();
  ctx.arc (this.posX, this.posY, this.radius, 0, 2*Math.PI);
  ctx.closePath ();
  ctx.fill();
};

  </script>
  <style>
     body {
    background-color:#021c36 ;
 margin: 0px;}
 </style>
 </head>
 <body>
  <canvas id ="space", width = "1400", height = "800">
 </canvas>  
 </body>
  </html>


黑鳟鱼
var canvas=document.getElementById（“空格”）；
var ctx=canvas.getContext（'2d'）；
var黑洞；
var circle=新数组（）；
window.onload=init；
函数init（）{
var G=6.67e-11，//引力常数
c=3e8，//光速（m/s）
M=12e31，//黑洞的质量，单位为千克（60太阳质量）
Rs=（2*G*M）/9e16，//Schwarzchild半径
像素_Rs=Rs/1e3；//缩放半径
黑洞=新球（像素为700400，“黑色”）；
blackhole.draw（）；
};
功能球（半径、位置X、位置Y、颜色）{
这个半径=半径；
this.posX=posX；
this.posY=posY；
这个颜色=颜色；
} 
Ball.prototype.draw=函数（ctx）{
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=this.color；
ctx.beginPath（）；
ctx.arc（this.posX，this.posY，this.radius，0,2*Math.PI）；
ctx.closePath（）；
ctx.fill（）；
};
身体{
背景色：#021c36；
边距：0px；}

有人能告诉我为什么我不能让画布画黑洞，以及如何创建那100个圆圈并给它们设置动画吗？我已经尝试了所有的方法，但我无法让它工作

非常感谢

您的html缺少画布：

<canvas id="space"/>

虽然它仍然无法绘制，但这可能是因为尺寸/颜色

更新：

你可以看到一个版本：从这里你可以逐渐改变数字。（有一些奇怪的bug，window.onload没有被调用，所以我在js的末尾添加了一个调用）

我想你只是看不到黑洞，因为它不发光：）并且可能你需要添加到html主体中，以便你的画布显示你告诉它绘制的黑弧，你需要在你的文档中有一个画布，要在

onload

事件中包装脚本，要在

blackhole.draw（ctx）

中删除

ctx

，或者要实际将调用传递到context2d，还必须确保画布的宽度和高度属性设置为>1000。对于移动的圆圈，这对于SO的格式来说是一个太宽泛的问题。但是我确实放置了画布标记（我可能复制/粘贴错误），我不明白为什么它没有绘制黑色圆圈请检查您的控制台，

document.getElementById（“空格”）和canvas.getContext（'2d'）
应该在init函数中，或者在文档中的画布声明之后。这里它确实画了弧：所以在编辑之后，我可以确认当你调用它时，canvas是空的，而ctx是未定义的。你是什么意思，可能是因为颜色，我的意思是，你可能画到了一个超出画布大小的点。所有这些巨大的数字。。。。尝试在画布上的已知位置画一个小圆圈，然后开始将数字更改为真实的物理值。你可能需要在这里缩放一些东西，因为你没有足够的画布大小。请看我上次的更新，你甚至可以在那里看到你的黑洞：）@Gavriel，它实际上在坐标800600左右，画布元素不是自动闭合的，你应该设置宽度和高度属性，否则它将默认为300150yes，我也设法把它修好了。由于某种原因，JSFIDLE中没有调用window.onload
blackhole.draw(ctx);