window.onload = function () {
C = Math.cos;
S = Math.sin;
U=0;
canvas = document.getElementById("myCanvas");
c = canvas.getContext("2d");
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var U=180>>0;
c.fillRect(0, 0, W, H); // resize and draw black rect (default)
c.globalCompositeOperation = "lighter"; // switch to additive color application
c.lineWidth = 10.0;//设置画笔的大小
c.lineCap = "round";//设置圆滑
t = 0;
var bool = 0;
canvas.onmousemove = function (e) {
if(window.T) {
if(D==0) {
D=Math.random()*15;}
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
R = e.pageX/W
r = e.pageY/H
a=0; // previous coord.x
b=0; // previous coord.y
A = X, // original coord.x
B = Y; // original coord.y
U=e.pageX/H * 360 >>0;
D=0;
g = Math.PI/180;
T = setInterval(f = function (e) {
c.save();
c.globalCompositeOperation = "source-over";
if(e!=1) {
c.fillStyle = "rgba(0,0,0,0.1)";
c.fillRect(0, 0, W, H);
}
c.restore();
i = 30;
while(i --) {
c.beginPath();
if(D > 200 || bool) { // decrease diameter
if(!bool) { // has hit maximum
bool = 1;
}
if(D < 0.1) { // has hit minimum
bool = 0;
}
t -= g; // decrease theta
D -= 0.1; // decrease size
}
if(!bool) {
t += g; // increase theta
D += 0.1; // increase size
}
x = D*C(t)+X;
y = D*S(t)+Y;
if (a) {
c.moveTo(a, b);
c.lineTo(x, y);
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
c.stroke();
a = x; // set previous coord.x
b = y; // set previous coord.y
U -= 0.5; // increment hue
A = X; // set original coord.x
B = Y; // set original coord.y
}
},20);
}
}