如何使用矢量作为坐标在画布上绘制对象？

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