从画布中抽出JavaScript

问题描述 投票:-1回答:1

我一直在开发一个包含某种遗传算法的程序。对于我的程序,假设有200个单位,每个单位可以处于5个不同的状态。最初,它们都从状态0开始,并且它们可以随机跳转到状态1至4,并影响其他单元也跳转。这样,状态2上的单元越多,更多单元将跳到状态2,依此类推。我让这些单元在画布内随机移动,当它们碰到墙壁时会从墙壁上弹起。我现在想做的一件事是可视化图表的演变,为此,我希望画布的一侧具有跳跃状态的单位,而其旁的图表则动态地表示状态为0的单位的百分比,1、2 ...同时。在编码图表时,大概不会有任何问题,但是我找不到在画布外部显示或不对其进行更改的方法。以防万一,我在Atom中编程,并且大多使用p5库。有什么想法吗?

javascript canvas p5.js
1个回答
0
投票

您有2个选项:

  1. [创建第二个画布(就像enhzflep所说的那样,但是对您来说可能很复杂,因为您将无法访问第二个画布上的P5.js绘图工具,请看此:]]
  2. (在您的第一个画布上)

fill(255,0,0)
rect(50,50,50,50);

制作并绘制到第二个画布:

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
//deal with positioning, scaling, and other stuff (comment if you need help with that)
...

const c = canvas.getContext('2d');
c.fillStyle = "rgb(255,0,0)";
c.fillRect(50,50,50,50);

(看,很努力)

  1. 或者,您可以只使用第一个画布,然后将专用于该图的部分进行分区
  2. createCanvas(600 + graphWidth, 600);
    
    //Wherever your bouncing off walls code is
    //for the right side of the screen
    
    if(this.x > width - graphWidth){
      bounce();
    }
    
    //that leaves you a graphWidth by 600 rectangle for you to draw you graph
    

第二个选项更易于阅读,并且可以为您省去一些麻烦(我会用)。

© www.soinside.com 2019 - 2024. All rights reserved.