学习完GD
库突发奇想地在静态网页上做了个丘比特的箭，必须能动的。做这个箭并没用到FLASH
和一些超纲的知识，这算是将前面学的知识的总结吧，顺便声明下这篇文章是写给新手的，高手请略过吧囧。其中笔者希望带给广大的开发工程师（俗称：苦逼程序员）一些思想，如果你是有着位喜欢探索的心，那将带给你的是开发的无穷乐趣。好了废话不多说，下面开始做我们的丘比特的箭。
首先介绍下思路：大家都知道HTML是一种静态的标记语言，那如何让她动起来呢？这里我们借鉴下FLASH中的思想，弄一组连续的画面（帧），然后让组画面在不同时间出现，那我们就实现了动画。下面需要思考的是如何产生一组连续的画面。大家都知道用GD库画的图像是静态的，但是我们可以让静态的图形按着一个轨迹连续的出现在不同的位置，这个轨迹是一组连续的点这里我们称之为横坐标X和纵坐标Y，如果在连续的时间内获取到不同位置上的图形，那我们的丘比特之箭就动起来了。知道了这些，那如何获得这个轨迹呢？这里我们需要声明产生轨迹的函数，这个函数可以返回不断递增的X和Y，只要我们让网页不停的去调用这个函数那就能不断的获取到轨迹上的连续的坐标。这里需要注意一下，轨迹的初始位置我们设成（0,0），这里我们让X，Y每次都加1个，那调用函数的时候将始终得到坐标（1.1），因为每次调用函数的时候都初始化了一下X和Y，跟我们的最初想法有了偏差。那如果我们将每调用完函数的坐标赋值给初始坐标，将这个坐标存储起来，然后下次调用函数的时候再读取这个坐标不就可以让坐标动起来了吗，O(∩_∩)O哈哈~，下面说下如何存储这个初始的坐标呢。数据库是个好东西，不过那是超纲的知识，PASS掉，我们学过文件的读取和写入，嗯，好了就用它了，我们新建一个TXT文档，然后把每次产生的坐标写到TXT中，下次再读出来就OK了。这些都做完了，我们的后台就基本搞定了，我们将产生的丘比特之箭放到静态的网页上，然后不停的刷新网页，这样丘比特的箭就可以动起来了。笔者邪恶的刷新了网页（F5键）发现按的手有点累，好吧，我们是玩电脑的肿么能让电脑把我们玩了呢？写段代码让网页自动刷新，不就可以了吗O(∩_∩)O，good
idear！ 这里我们需要用到“”这段代码，这是在学HTML时讲过的，没有超纲哦。二话不说直接放到HTML文件中，这里笔者将meta
的content值设成1，够小了吧，这样刷新的时间段小了，画面看起来就连续了，不过这个最小时间也就1秒似乎还不是很尽人意，肿么办？比秒更小的单位是微秒，只要我们能获取到一段一段的微秒值，那刷新频率就上去了，（这里感谢下组里的超哥，提供了人眼可以识别的最小时间0.013333s），我们的微秒足以达到这个精度了，这里笔者用microtime()-microtime() 获取了一段微秒值，每隔这个微秒网页刷新一次，然后丘比特的箭就连贯的跑了起来，这里需要提醒下电脑前面的童鞋，内存低者，CPU爬坟者请在家长的监督下运行代码囧，笔者的本本在刷网页的时候CPU直接用到了100%，然后本来连续的箭变的跟抽筋似的，不过目前市面上的电脑基本上都不在乎这点资源了。剩下的就是在做的图片上装饰一番，画个大桃子了什么的基本上门面也有了，笔者的图画上让丘比特转行了，这里留点悬念，自己运行带码看吧。哈哈。然后呢？然后就没有然后了，传上附件，哦了（发现笔者太喜欢用“然后”了
⊙﹏⊙）。 今天先写到这里，笔者也是个成长中的小菜鸟，看官有什么好的建议和意见可以在下面顶贴留言，这个小程序也算抛砖引玉，希望更多的开发者能继续将它完善起来，比如在网页上做个循环跑动的丘比特之箭了、做个贪吃蛇了等等，同时笔者也希望这个小程序会闲暇时间给带来些许乐趣。然后笔者还会再次突发奇想，下次会做出神马呢？让我们共同期待吧。
下面附上源码
header("Content-Type:
image/png");
include("2.php");
$x=xy();
//创建颜色画笔和画布
$im =
imagecreatetruecolor(1000,500);//宽1280，高960值支持256色
$red=imagecolorallocate($im,255,0,0);
$blue=imagecolorallocate($im,0,0,255);
$grey=imagecolorallocate($im,200,200,200);
$black=imagecolorallocate($im,0,0,0);
$super=imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255));
//开始绘画
imagefill($im,0,0,$black);//填充
for($i=0;$i<900;$i++)
{
imagesetpixel($im,rand(0,900),380,$super);
imagesetpixel($im,rand(0,900),380,$super);
imagesetpixel($im,rand(0,900),rand(0,900),$super);
imagesetpixel($im,rand(0,900),rand(0,900),$super);
}
imageline($im,10,10,10,490,$blue);
imageline($im,10,10,990,10,$blue);
imageline($im,990,10,990,490,$blue);
imageline($im,10,490,990,490,$blue);
$str1="10,10";
$str2="990,490";
$str3="990,10";
$str4="10,490";
imagestring($im,2,10,0,$str1,$red);
imagestring($im,2,950,490,$str2,$red);
imagestring($im,2,960,0,$str3,$red);
imagestring($im,2,10,490,$str4,$red);
/////////////////////////////////////////画箭头，人眼识别的0.013333s
$strstr=">>>------------>";
imagefilledarc($im,970,300,50,300,0,360,$red,IMG_ARC_PIN);
imagefilledarc($im,970,300,40,220,0,360,$grey,IMG_ARC_PIN);
imagefilledarc($im,970,300,30,140,0,360,$blue,IMG_ARC_PIN);
imagefilledarc($im,970,300,20,30,0,360,$black,IMG_ARC_PIN);
imagestring($im,2,$x,300,$strstr,$red);
imageline($im,rand(0,300),rand(0,300),rand(0,300),rand(0,300),$super);
imagepng($im);
imagedestroy($im);
?>
function
xy()
{
$data = file_get_contents("input.txt");
$convert =
explode("\n", $data);
$x = $convert[0] ;
$y = $convert[1]
;
if($x>990)
{$x=$y=0;}
$mk1=microtime();
$mk2=microtime();
////////////////////////定义轨迹起点坐标
$start_x=10;//初始化x
$start_y=400;//初始化y
$mark=time();
$x+=15;
$y++;
$y=400;
$data
= $x."\n".$y;
file_put_contents("input.txt",$data);
return
$x;
}
?>
735
400
-----------------------------------------------------------
代码已堆好。see you!
原文地址：
