<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
body {
margin: 0;
padding: 0;
background: black;
}
#debug {
position: fixed;
top: 5;
left: 5;
width: 100px;
height: 20px;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<div id="debug"></div>
<div id="canvasDiv"></div>
</body>
<script>
var canvas = document.createElement('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
canvas.setAttribute('id', 'canvas');
document.getElementById('canvasDiv').appendChild(canvas);
var context = canvas.getContext('2d');
var circleCoord = [];
var stay = 0;
var dir = dirY = 1;
var auto = true;
mX = window.innerWidth / 2;
mY = window.innerHeight / 2;
var handle = function(e) {
stay = 0;
auto = false;
mX = e.pageX - this.offsetLeft;
mY = e.pageY - this.offsetTop;
};
canvas.addEventListener('mousemove', handle);
canvas.addEventListener('touchmove', handle);
var frame = 0;
function render() {
//mX += 0.1;
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
document.getElementById('debug').innerHTML = mX + ' ' + mY;
var cX = canvas.width / 2;
var cY = canvas.height / 2;
function drawCircle(mx, my, radius, opacity) {
context.beginPath();
context.arc(mx, my, radius, 0, 2 * Math.PI, false);
//context.fillStyle = 'green';
//context.fill();
context.lineWidth = 3;
var ctx = context;
context.strokeStyle = 'rgba(100, 149, 237,' + opacity + ')';
//ctx.fillStyle = 'rgba(225,225,225,0.5)';
//ctx.fillRect(25,72,32,32);
context.opacity = 1;
context.stroke();
}
frame++;
if (frame % 1 == 0) {
if (frame > 5 && frame % 2 == 0 && circleCoord[circleCoord.length - 1][0] == mX && circleCoord[circleCoord.length - 1][1] == mY) {
stay++;
if (stay > 50) auto = true;
}
if (!auto) {
circleCoord.push([mX, mY, frame]);
} else {
stay++;
stay %= 400;
if (stay % 93 == 0) {
dir = -dir;
dirY = -dirY;
}
//var dir = -1;
circleCoord.push([mX + dir * (Math.random() * 3 - 100 + stay), mY + dirY * (Math.random() * 3 - 100 + stay), frame]);
// circleCoord.push([mX+(-1 + Math.random()*2)*(Math.random()*100+100),mY+(-1 + Math.random()*2)*(Math.random()*100+100),frame]);
}
}
if (circleCoord.length > 100) circleCoord.shift();
for (var i = 0, c = circleCoord.length; i < c; i++) {
var base = frame - circleCoord[i][2] + 15;
var aX = circleCoord[i][0];
var cX = circleCoord[i][1];
drawCircle(aX + base, cX + base / 2, 3 * base + base / 10, 1.3 / base);
drawCircle(aX, cX, 1.5 * base + base / 10, 2.3 / base);
drawCircle(aX, cX, 2 * base + base / 20, 2.5 / base);
}
requestAnimationFrame(render);
}
render();
</script>
</html>
7911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
