html5 demos-渐变

最新推荐文章于 2022-06-29 22:49:17 发布

佐笾已逝

最新推荐文章于 2022-06-29 22:49:17 发布

阅读量98

点赞数

分类专栏： Html5 文章文章标签： HTML5

本文链接：https://blog.csdn.net/wjlgryx/article/details/83873270

版权

Html5 文章专栏收录该内容

80 篇文章 0 订阅

订阅专栏

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