c.moveto html,HTML5 Canvas的使用

测试

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);

}

}