HTML5 知识库
html5 demos-渐变
阅读:1068次
评论:0条
更新时间:2011-03-17
<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>
评论 共 0 条 请登录后发表评论
您还没有登录,请您登录后再发表评论
