Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

104 lines (102 sloc) 2.788 kb
<!DOCTYPE html>
<html>
<head>
<title>Stripe Test</title>
<style>
body {
background-image:
-webkit-gradient(linear, left top, right top,
from(rgba(0,0,0,0)),
color-stop(0.8, rgba(0,0,0,0)),
color-stop(0.8, black),
color-stop(1, black),
to(rgba(255,0,0,0.75)));
ffbackground-color: blue;
height: 100%;
width: 100%;
margin: 0;
-webkit-background-size:30px;
}
html {
background-image:
-webkit-gradient(linear, 100% 0%, 0% 100%,
from(transparent),
color-stop(0.20, transparent),
color-stop(0.25, black),
color-stop(0.50, black),
color-stop(0.50, transparent),
color-stop(0.65, transparent),
color-stop(0.85, black),
to(black));
ffbackground-color: blue;
height: 100%;
width: 100%;
margin: 0;
-webkit-background-size:60px;
}
#can {
position: fixed;
top: 0;
z-index: 0;
left: 0;
}
</style>
<script type="text/javascript">
var Circle = function (x,y,r,color) {
this.x = x;
this.y = y;
this.r = r;
this.color = color;
}
var circles = [];
var curColor = "black";
var mouseX, mouseY;
var counter = 1;
onmousemove = function (e) {
document.body.style.backgroundPositionX = e.pageX/20+"px";
document.getElementsByTagName("html")[0].style.backgroundPositionY = -e.pageY/10+"px";
mouseX = e.pageX;
mouseY = e.pageY;
//addCircle();
}
addCircle = function () {
counter++;
if (mouseX && !(counter%2)) {
circle = new Circle(mouseX,mouseY,1,curColor);
//curColor = (curColor=="black")?"white":"black";
circles.push(circle);
}
}
draw = function(e) {
//console.log("Hey");
var canvas = document.getElementById("can");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d");
for (i=0;i<circles.length;i++) {
circle = circles[i];
context.beginPath();
context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);
context.fillStyle = circle.color;
//context.fill();
context.strokeStyle = circle.color;
context.stroke();
context.lineWidth = 3;
circle.r += (20-circle.r)/10;
}
/*if (circles.length>0) {
console.log(circles.shift());
//while (circles.shift().r>9);
}*/
while (circles.length>0 && circles[0].r>19.5)
circles.shift();
};
//setInterval(draw,20);
//setInterval(addCircle,300);
</script>
</head>
<body>
<canvas id="can" width="100%" height="100%">
</canvas>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.