如何使用canvas和javascript動畫100個圈子？

我正在嘗試創建一個黑洞模擬，該模擬將顯示一個黑洞和100個遠離它的圈子，速度會因重力而下降。這裏是我的代碼：如何使用canvas和javascript動畫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>

誰能告訴我爲什麼我不能讓畫布繪製黑洞，以及如何創建這100圓和它們的動畫，我從字面上嘗試了一切，我不能使其工作非常感謝

來源

2016-01-24 carretero_1

我認爲你只是看不到黑洞，因爲它不發光:)而且可能你需要爲你的畫布添加

上，以顯示你畫的黑色圓弧，你需要在你的文檔中畫一個畫布，把你的腳本包裝在一個'onload '事件，要移除'blackhole.draw（ctx）'中的'ctx'或實際將調用傳遞給context2d，並且還必須確保畫布的寬度和高度屬性設置爲> 1000。你的移動圈子，這是一個SO格式太廣泛的問題。 – Kaiido

但我確實把畫布標籤（我可能複製/粘貼錯誤），我不明白爲什麼它不畫黑圈 –

你錯過了從HTML畫布：

<canvas id="space"/>

你需要傳遞CTX您繪製函數：

blackhole.draw(ctx);

雖然它仍然沒有畫，但那可能是因爲尺寸/顏色。

更新：

這裏有一個版本，你可以看到：https://jsfiddle.net/gjwh33mq/2/從這裏你可以逐步改變數字。（有一些奇怪的bug，window.onload沒有被調用，所以我在js的末尾添加了一個調用）

來源

2016-01-24 13:22:54 Gavriel

你是什麼意思，它可能是因爲顏色 –

https://jsfiddle.net/gjwh33mq/我的意思是你可能畫到一個點的畫布大小以外。所有這些巨大的數字....試着畫一個小圓圈到畫布上的已知位置，然後開始將數字改變爲真實的物理值。你可能需要在這裏縮放一些東西，因爲你沒有足夠的畫布大小恕我直言 – Gavriel

看到我最近的更新，你甚至可以看到你的黑洞:) – Gavriel

如何使用canvas和javascript動畫100個圈子？

回答

相關問題