`
wjlgryx
  • 浏览: 298855 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5 demos-渐变

HTML5 
阅读更多

<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>
分享到：
| webGL 第一个demos
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics