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

时间:2017-05-27 11:13:15

标签: javascript html canvas

我一直在尝试创建一个生态模拟,到目前为止一直很好。下面的代码确实有效我只是想知道是否有更简单的方法在画布上用代码绘制更多项目而不是手动执行它。我这样做的方式让我考虑滞后因为我会在代码中添加很多东西(例如移动,检测,重现,追逐,运行等)。谢谢你看到这个

//This tag will regulate the spawning of new sheep/wolves
var totalWolves = 0;
var totalSheep = 0;
var canavs = document.getElementById("canvas");
var body = document.getElementById("body");

//styler
body.style.overflow = "hidden";
body.style.margin = "0px";
canvas.style.backgroundColor = "black";

function spawnWolves(){
	totalWolves++;
	var name = "wolf" + totalWolves;
	var scrpt = document.createElement("SCRIPT");
	document.body.appendChild(scrpt);
	scrpt.setAttribute("id", name);
	var script = document.getElementById(name);
	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();";
	
}
spawnWolves();
spawnWolves();
spawnWolves();
<!DOCTYPE html>
<html>
<head>
<title>AI spawn test</title>
</head>
<body id="body">
<canvas id="canvas" width="1366px" height="768px"/>
<script>

</script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

这种类型的复制&#39;是使用loop完成的。有几种循环类型,但它们的解释过于宽泛。你可以浏览网页。

我在下面给出了2个示例 - for循环和while循环。

&#13;
&#13;
//This tag will regulate the spawning of new sheep/wolves
var totalWolves = 0;
var totalSheep = 0;
var canavs = document.getElementById("canvas");
var body = document.getElementById("body");

//styler
body.style.overflow = "hidden";
body.style.margin = "0px";
canvas.style.backgroundColor = "black";

function spawnWolves(){
	totalWolves++;
	var name = "wolf" + totalWolves;
	var scrpt = document.createElement("SCRIPT");
	document.body.appendChild(scrpt);
	scrpt.setAttribute("id", name);
	var script = document.getElementById(name);
	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(var i=0; i<12; i++)
{
    spawnWolves();
}

var maxWolves=9;
while(totalWolves < maxWolves)
{
    spawnWolves();
}
&#13;
<!DOCTYPE html>
<html>
<head>
<title>AI spawn test</title>
</head>
<body id="body">
<canvas id="canvas" width="1366px" height="768px"/>
<script>

</script>
</body>
</html>
&#13;
&#13;
&#13;

第一个循环将一直运行,直到其内部计数器i从0变为12并且将正确调用该函数12次。

只要条件totalWolves < maxWolves为真,第二个循环就会运行。 totalWolves是你增加函数的计数器,maxWolves是你希望循环停止时的限制。

因为这两个例子一个接一个地添加到这里,第二个不会起作用。在第一个执行之后,您将拥有12只狼,而第二个循环将不会进入,因为12 < 9为假。

答案 1 :(得分:1)

你的解决方案看起来很复杂......

请查看以下代码。

<?php
$fromdate = date("Y-m-d");;
$todate = date("Y-m-d");;
$proteam = "yah";
//-----------------------datewise live report-------------------------------------//
$action =$_POST['action'];
$fromdatepick =$_POST['fromdatepick'];
$todatepick =$_POST['todatepick'];
if(($action)=="datewise")
{
echo($action. "<br/>".$fromdatepick. "<br/>".$todatepick. "<br/>");
}
?>	
<!-- BAR Chart -->
<div class="col-sm-12">
	<div id="bg-default" class="panel-collapse collapse in">
			<?php if(($action)!="datewise")
			{
			$where = ("and  t1.status_date between '$fromdate' and '$todate'");?>
				<div id="chart1" class="chartdiv" style="width	: 100%;	height	: 500px;"></div>
			<?php } else {
			$where = ("and  t1.status_date between '$fromdatepick' and '$todatepick'");?>
			<div id="chart2" class="chartdiv" style="width	: 100%;	height	: 500px;"></div>
            <?php } ?>					
			</div>
</div>