一个很有意思的跳舞机器人JS

puyuetian 乐天 关注 九级站长 创始人
发表于前端UI学习设计文章版块
今天无意中发现一个很有意思的跳舞机器人js,我简单整理了一下,分享给大家。

大家可以自行配个mp3更带感:

<audio src="mp3地址" autoplay></audio>


预览:


全屏预览,带音乐(退出刷新页面即可):


用法:

//直接用,填满窗口
dancerRobot();
//在canvas对象里,需要定义canvas对象
dancerRobot('#dancerRobot');
//机器人的大小,仅两种:大和小,小true,大false
dancerRobot(false,true);
示例(直接用):

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>跳舞的机器人</title>
	</head>

	<body>
		<script src="http://cdn.hadsky.com/js/other/dancerRobot.min.js"></script>
		<script>
			window.onload = dancerRobot();
		</script>
	</body>

</html>
示例(指定用):

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>跳舞的机器人</title>
		<style>
			body,
			html {
				position: absolute;
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				overflow: hidden
			}
			
			#dancerRobot {
				position: absolute;
				width: 100%;
				height: 100%;
				background: #ccc;
				cursor: pointer
			}
		</style>
	</head>

	<body>
		<canvas id="dancerRobot"></canvas>
		<script src="http://cdn.hadsky.com/js/other/dancerRobot.min.js"></script>
		<script>
			window.onload = dancerRobot("#dancerRobot");
		</script>
	</body>

</html>

点击下载:dancerRobot.min.js




评论列表 评论
dianzijun 电子菌 五级站长 VIP 2#
沙发
共0条回复,点击查看回复
发布评论

评论: 一个很有意思的跳舞机器人JS

已有0次打赏
(0) 分享
分享

请保存二维码或复制链接进行分享

取消