来挑战吧！画出图中的红点的运动轨迹，方法不限。每个方法第一个威望奖励！

WellFrog · 发表于 2012-12-3 14:28:08

本帖最后由 WellFrog 于 2012-12-3 14:41 编辑

如下图，点击查看gif动态图

yr92511 · 发表于 2012-12-4 09:44:49

让我想起了招聘oracle工程师做面试题解决公司问题的故事

zhanyuzai · 发表于 2012-12-4 11:21:20

yr92511 发表于 2012-12-4 09:44
让我想起了招聘oracle工程师做面试题解决公司问题的故事

什么样的故事？
－－CSS3 版本，没坐标，没轨迹，不过把图片拿来做参照了－－

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
		html,body{
			width:100%;
			height:100%;
			overflow:hidden;
		}
		body{
			background:url([url]http://bbs.blueidea.com/forum.php?mod=attachment&aid=MTk3MDc3fGVhNjU3ZjI3fDEzNTQ1ODgzNzR8Mzg3MzE4fDMwODczMjE%3D&noupdate=yes&nothumb=yes[/url]) center center;
		}
		.big{
			position:relative;
			top:50%;
			left:50%;

width:290px;
			height:290px;
			margin:-148px -163px;

border:1px solid blue;
			border-radius:50%;

-webkit-animation:round3 5s linear infinite;
		}
		.small{
			position:absolute;
			right:0;
			top:20%;

width:60%;
			height:60%;

border:1px solid black;
			border-radius:50%;

-webkit-animation:round2 5s linear infinite;
		}
		.small img{
			position:absolute;
			top:50%;
			right:-40%;

background:red;

margin-top:-8px;
		}

@-webkit-keyframes round2{
			0%{
				-webkit-transform:rotate(0deg);
			}
			100%{
				-webkit-transform:rotate(1800deg);
			}
		}

@-webkit-keyframes round3{
			0%{
				-webkit-transform:rotate(1080deg);
			}
			100%{
				-webkit-transform:rotate(0deg);
			}
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="small">
			<img src="http://rndz.org/favicon.ico" alt="Created by [email]z@rndz.org[/email]">
		</div>
	</div>
</body>
</html>

提示：您可以先修改部分代码再运行

yr92511 · 发表于 2012-12-4 11:58:42

zhanyuzai 发表于 2012-12-4 11:21
什么样的故事？
－－CSS3 版本，没坐标，没轨迹，不过把图片拿来做参照了－－
[html]

就是让你免费帮面试公司解决困难

zhanyuzai · 发表于 2012-12-4 12:38:59

yr92511 发表于 2012-12-4 11:58
就是让你免费帮面试公司解决困难

不至于吧。。。这个又不是什么难题。。。

ssg000 · 发表于 2012-12-4 14:04:12

提示: 作者被禁止或删除。

WellFrog · 发表于 2012-12-4 14:14:14

请勿回复与主题讨论无关的内容，谢谢配合~
此外考虑在帖子结束以后，删除与技术讨论无关的回复

ONEBOYS · 发表于 2012-12-4 17:04:34

发现用CSS3做动画真的很方便啊。

下面用canvas来一个吧。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>圈圈图</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;background:#333;}
</style>
</head>
<body>
	<canvas id="pad" width='2000' height='1000'><a href='http://www.cssass.com'>cssass.com</a></canvas>
</body>
<script>
var con=document.getElementById("pad").getContext('2d');
	con.strokeStyle = 'rgba(255,255,255,0.5)';
	con.lineJoin = 'round';
	con.lineCap = 'round';
	con.lineWidth=.5;

function Toy(R,r,l){
	this.R = R || 200;
	this.r = r || 120;
	this.l = l || 200;
	this.maxL = this.R - this.r + this.l,
	this.angle = Math.PI*2/50;
}

Toy.prototype.draw = function(){

this.angle += 0.2;
	con.clearRect(0,0,2000,1000);

con.save();
	//大圆
	con.translate(this.maxL+10,this.maxL+10);
	con.beginPath(); 
	con.arc(0,0,this.R,0,Math.PI*2,true);
	con.closePath();  
	con.stroke();

//小圆
	con.rotate(-this.angle);
	con.translate(this.R-this.r,0);
	con.beginPath(); 
	con.arc(0,0,this.r,0,Math.PI*2,true);
	con.closePath();  
	con.stroke();

//线
	con.rotate(this.angle * this.R/this.r);
	con.moveTo(0,0);
	con.lineTo(this.l,0);
	con.stroke();

//小点
	con.translate(this.l,0);
	con.beginPath(); 
	con.arc(0,0,2,0,Math.PI*2,true);
    con.fill();

con.restore();
}
Toy.prototype.move=function(){
	var that = this;
	var _s=function(){
		that.draw();
		setTimeout(_s,50);
	}
	_s();
};

new Toy().move();

</script>
</html>

提示：您可以先修改部分代码再运行

想起了小时候的一个玩具，大齿轮圈套小齿轮圈，小齿轮圈里有小孔可以插入铅笔画图的。等晚上再完善一下，单独发一贴吧。

andy80129 · 发表于 2012-12-5 16:37:23

是“繁花曲线规”。

画的是“内摆线”图案。
是一种儿童益智玩具，印象深刻，可惜现在都遗失了，也买不到哦。
http://baike.baidu.com/view/2853480.htm

ooosu · 发表于 2012-12-5 21:22:22

ONEBOYS 发表于 2012-12-4 17:04
发现用CSS3做动画真的很方便啊。

下面用canvas来一个吧。

很牛叉。。。。

帐号		自动登录	找回密码
密码			注册

[讨论] 来挑战吧！画出图中的红点的运动轨迹，方法不限。每个方法第一个威望奖励！

评分

评分

ssg000 ssg000 当前离线 UID 595598 在线时间小时积分 539 帖子离线 18316 天注册时间 2011-9-21 IP卡狗仔卡禁止发言	发表于 2012-12-4 14:04:12 \| 显示全部楼层提示: 作者被禁止或删除。

	回复支持反对使用道具举报显身卡