Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (41 sloc) 1.56 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Canvas Fireworks</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
* { margin: 0; padding 0; }
body { background:#000; font-family: "Droid Sans", "Trebuchet MS"; margin:20px auto; width:600px; font-size: .7em; }
h1 { color: #CCC; float: left; }
form { margin: 0 0 6px 0; float: right; }
label { color: #666; }
select { background-color:#F6F6F6; border: none; margin:4px; padding:2px; width:9em; }
canvas { border: 1px solid #111; cursor: pointer; }
p { color: #CCC; float: right; margin:10px 0; opacity: .4; text-shadow: 0 0 50px rgb(255,255,255); }
</style>
</head>
<body>
<h1>Canvas Fireworks</h1>
<form>
<label for="gravity">Gravity</label>
<select id="gravity">
<option value="0">None</option>
<option value="1" selected>Light</option>
<option value="2">Medium</option>
<option value="3">Heavy</option>
</select>
<label for="image_src">Type</label>
<select id="image_src">
<option value="star">Star</option>
<option value="electric">Electric</option>
<option value="spark" selected>Spark</option>
</select>
</form>
<canvas id="fireworks" width="600" height="400"></canvas>
<p>* Click and hold to control</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/canvas.js"></script>
</body>
</html>
Something went wrong with that request. Please try again.