抽出 canvas JavaScript

Question

我一直在开发一个包含某种遗传算法的程序。 对于我的程序，假设有 200 个单元，每个单元可以处于 5 个不同的状态。 最初，它们都从 state 0 开始，它们可以随机跳转到状态 1 到 4，并影响其他单元也跳转。 这样，state 2 上的单元越多，跳转到 state 2 的单元越多，依此类推。 我让这些单元在我的 canvas 内随机移动，当它们撞到它们时会从墙上弹开。 我现在想做的一件事是在图表上可视化演变，为此我希望 canvas 的一侧有单位跳跃状态，旁边有图表，动态表示 state 0 中的单位百分比, 1, 2... 同时。 我大概在编码图表时没有问题，但是我找不到在 canvas 之外或不改变它的情况下显示它的方法。 以防万一，我在 Atom 中编程并且主要使用 p5 库。 有任何想法吗？？

Answer 1

您有 2 个选项：

1. 制作第二个 canvas（就像 enhzflep 说的那样），但这对您来说可能很复杂，因为您将无法访问第二个 canvas 上的 P5.js 绘图工具，看看这个：

（在你的第一幅画布上）

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

制作并绘制第二个 canvas：

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

（看，很多努力）

2. 或者，您可以只使用您的第一个 canvas，并将专用于图形的部分分区

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

第二个选项更容易阅读，并且会为您省去一些麻烦（我会使用它）。