Javascript 在画布上绘制更多内容，而无需创建更多脚本标记

我一直在尝试创建一个生态模拟，到目前为止效果良好。下面的代码确实有效，我只是想知道是否有一种更简单的方法可以用代码在画布上绘制更多的项目，而不是手动绘制。我做的方式让我考虑滞后，因为我会给代码增加很多（例如移动、检测、复制、追踪、运行等）。谢谢你看这个

//此标签将控制新绵羊/狼的产卵
var=0；
var-totalSheep=0；
var canavs=document.getElementById（“画布”）；
var body=document.getElementById（“body”）；
//斯特勒
body.style.overflow=“隐藏”；
body.style.margin=“0px”；
canvas.style.backgroundColor=“黑色”；
函数（）{
TotalWolfs++；
var name=“wolf”+TotalWolfs；
var scrpt=document.createElement（“脚本”）；
文件.正文.附件（scrpt）；
scrpt.setAttribute（“id”，名称）；
var script=document.getElementById（名称）；
script.innerHTML=“var rand3=Math.floor（Math.random（）*100）+1；var rand4=Math.floor（Math.random（）*100）+1；var canvas=document.getElementById（'canvas'）；var context=canvas.getContext（'2d'）；context.fillStyle='red'；context.fillRect（rand3，rand4，10，10）；context.fill（）；”；
}
产卵狼（）；
产卵狼（）；
产卵狼（）

人工智能产卵测试
这种类型的“复制”是通过使用
循环来完成的。有几种循环类型，但它们的解释过于宽泛。你可以浏览网络

我在下面给出了两个例子，分别是
for
循环和
while
循环


//此标签将控制新绵羊/狼的产卵
var=0；
var-totalSheep=0；
var canavs=document.getElementById（“画布”）；
var body=document.getElementById（“body”）；
//斯特勒
body.style.overflow=“隐藏”；
body.style.margin=“0px”；
canvas.style.backgroundColor=“黑色”；
函数（）{
TotalWolfs++；
var name=“wolf”+TotalWolfs；
var scrpt=document.createElement（“脚本”）；
文件.正文.附件（scrpt）；
scrpt.setAttribute（“id”，名称）；
var script=document.getElementById（名称）；
script.innerHTML=“var rand3=Math.floor（Math.random（）*100）+1；var rand4=Math.floor（Math.random（）*100）+1；var canvas=document.getElementById（'canvas'）；var context=canvas.getContext（'2d'）；context.fillStyle='red'；context.fillRect（rand3，rand4，10，10）；context.fill（）；”；
}
对于（var i=0；i而言，您的解决方案似乎非常复杂

请看下面的代码



人工智能产卵测试
var ctx=canvas.getContext（“2d”）；
var drawRect=函数（rects）{
对于（var i=1；iNote），您的第二个循环不会做任何事情，因为已经有12个wolvesThanks，我知道，但我将为OP添加解释。