html5 demos-渐变

wjlgryx · 发表于 2013-1-24 06:42:26

<html>
<head>
<title>Canvas</title>
<script>
window.onload = function(){
var elem = document.createElement("canvas");
elem.width = 500;
elem.height = 500;
document.body.appendChild( elem );

var context = elem.getContext("2d");

context.fillRect(0, 0, elem.width, elem.height);

var pos = 0, dir = 1;

setInterval(function(){
context.rotate( 15 );

context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, elem.width, elem.height);

context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillRect(pos, pos, 20, 20);

pos += dir;

if ( pos > elem.width ) {
dir = -1;
} else if ( pos + 20 < 0 ) {
dir = 1;
}
}, 10);
};
</script>
</head>
<body></body>
</html>

		自动登录	找回密码
密码			立即注册