149 lines
3.4 KiB
PHP
149 lines
3.4 KiB
PHP
<?php
|
|
$files=scandir(".");
|
|
$fn=sizeof($files);
|
|
for ($i=0;$i<$fn;$i++) {
|
|
$link=$files[$i];
|
|
$imglink=explode(".",$link);
|
|
$imglink=$imglink[0].".png";
|
|
if (!is_dir($link) && $link!="." && $link!=".." && $link!="index.php") {
|
|
$fo=fopen($link,"r");
|
|
$fr=fread($fo,filesize($link));
|
|
fclose($fo);
|
|
$fr=explode("<title>",$fr);
|
|
$fr=explode("</title>",$fr[1]);
|
|
$title=$fr[0];
|
|
$sites.="<a href='".$link."' style='background-image:url(img/".$imglink.")'>".$title."</a>";
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
|
<head>
|
|
<title>Experimenting with canvas</title>
|
|
<style type='text/css'>
|
|
* {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
#wrapper {
|
|
width:700px;
|
|
margin:0 auto;
|
|
}
|
|
|
|
#header {
|
|
width:700px;
|
|
height:100px;
|
|
margin-bottom:5px;
|
|
background:#eee url(img/header.png) no-repeat;
|
|
}
|
|
|
|
#content {
|
|
width:690px;
|
|
padding:5px 5px 20px 5px;
|
|
background:#eee;
|
|
font:14px arial;
|
|
float:left;
|
|
position:relative;
|
|
}
|
|
|
|
#experiments {
|
|
width:690px;
|
|
float:left;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
#experiments a:link, #experiments a:visited {
|
|
width:211px;
|
|
height:144px;
|
|
margin:0 0 10px 10px;
|
|
padding:3px;
|
|
float:left;
|
|
background:#ddd;
|
|
opacity:.7;
|
|
filter:alpha(opacity=70);
|
|
-moz-opacity:.7;
|
|
display:block;
|
|
color:#0000ff;
|
|
text-decoration:none;
|
|
position:relative;
|
|
z-index:2;
|
|
}
|
|
|
|
#experiments a:hover {
|
|
background:#ccc;
|
|
opacity:1;
|
|
filter:alpha(opacity=100);
|
|
-moz-opacity:1;
|
|
color:#0000aa;
|
|
}
|
|
|
|
h1 {
|
|
font:normal 24px georgia;
|
|
margin:15px 0 10px 0;
|
|
}
|
|
|
|
#canvas {
|
|
position:absolute;
|
|
right:0;
|
|
bottom:0;
|
|
}
|
|
|
|
#error {
|
|
display:none;
|
|
font:16px arial;
|
|
color:#ff0000
|
|
}
|
|
</style>
|
|
<script type='text/javascript'>
|
|
function ani() {
|
|
if (x==0) {
|
|
x=700
|
|
y=Math.floor(Math.random()*200)
|
|
ctx.strokeStyle="rgb("+(Math.floor(Math.random()*128)+50)+","+(Math.floor(Math.random()*128)+50)+","+(Math.floor(Math.random()*128)+50)+")"
|
|
}
|
|
ctx.beginPath()
|
|
ctx.moveTo(x,y)
|
|
if (x<11) {
|
|
x=0
|
|
}
|
|
else {
|
|
x-=Math.floor(Math.random()*10)+1
|
|
do {
|
|
ny=y-(Math.floor(Math.random()*11)-5)
|
|
} while (ny<2 || ny>197)
|
|
y=ny
|
|
}
|
|
ctx.lineTo(x,y)
|
|
ctx.stroke()
|
|
setTimeout("ani()",40)
|
|
}
|
|
|
|
window.onload=function(){
|
|
ctx=document.getElementById("canvas")
|
|
if (!ctx.getContext) {
|
|
document.getElementById("error").style.display="block"
|
|
return
|
|
}
|
|
ctx=ctx.getContext("2d")
|
|
x=0
|
|
ani()
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id='wrapper'>
|
|
<div id='header'></div>
|
|
<div id='content'>
|
|
<canvas id='canvas' width='700' height='200'></canvas>
|
|
A new tag has entered the realms of internet browsing: CANVAS! With the canvas tag, people are now able to generate images in HTML! Not all browsers support it, but they probably will at some point. The point is, I've been experimenting a little with it, and to my delight it's actually pretty easy to work with. If you see something in one of my experiments that you like, feel free to copy-paste. Consider it free software.
|
|
<div id='error'>Your browser doesn't support use of the canvas tag. I haven't included error detection in my experiments, so your browser is likely to show an error. Browsers that support canvas include Firefox, Opera and Safari.</div>
|
|
<h1>Here it is:</h1>
|
|
<div id='experiments'>
|
|
<?php echo $sites; ?>
|
|
</div>
|
|
Hopefully your browser won't crash..
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|