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

How can I draw objects on canvas using vectors as coordinates?

本文关键字：绘制 对象 坐标 何使用      更新时间：2023-09-26

我是编程初学者，我想进行黑洞模拟，我不能使用矢量作为坐标绘制对象（我希望它是这样，以便之后可以使用矢量对它们进行动画处理），这是我的代码：

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

然后，您可以在下一个位置绘制对象。

相关文章：