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