如何使用矢量作為坐標在畫布上繪制對象？

Question

我是編程的初學者，我想進行黑洞模擬，我不能使用矢量作為坐標來繪制對象（並且我希望這樣，以便以后可以使用矢量為它們設置動畫），這是我的代碼：

 <!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：對不起，代碼，我的編輯不想正常工作:(

Answer 1

用矢量繪制。

// 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;

然后，您可以在下一個位置繪制對象。

如何使用矢量作為坐標在畫布上繪制對象？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-01-25 19:50:01

如何使用矢量作為坐標在畫布上繪制對象？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-25 19:50:01

解決方案1
1 已采納 2016-01-25 19:50:01