Canvas模拟小时候一种很炫的绘图玩具

Canvas模拟小时候一种很炫的绘图玩具
作者：Neoxone 发表时间： 2012年12月5号，星期三阅读：12,909 次

当时就想到了小时候的一样绘图玩具，也不知道叫什么名字，就是一块大齿轮圈圈，齿轮在圈内，还有其他几块小的齿轮圈圈，齿轮在圈外，小齿轮内还有很多小孔，把小齿轮放在大齿轮圈内，将铅笔插入小齿轮圈的小孔上，然后滑动铅笔，就能画出各式各样的弧线形状，非常好看。

下面我们就用代码模拟下这款玩具：也不算难，就是几个相对运动。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>繁花曲线规</title>
<style>
*{padding:0;margin:0;}
body{background:#eee;overflow-x:hidden;}
#operationBar{position: fixed;z-index:10000;bottom:0;width:100%;text-align:center;background:#FBFDFE;border-top:2px solid #CC0F16;padding:5px 0;}
.optText{width:35px;}
.dialog_Wrap{background:#666;border: 1px solid #585858;border-top:0;border-radius: 0 0 8px 8px;box-shadow: 1px 1px 2px #aaa; overflow: hidden;}
.dialog_Head{background:#000;height:26px;line-height:26px;padding: 0 5px;border-top:2px solid #CC0F16;cursor:move;color:#fff;font-size:12px;}
.dialog_close{text-decoration:none;color:#fff; display:inline-block;width:15px;height:15px;font-size:12px;text-align:center;line-height:15px;font-family:'Comic Sans MS';}
.dialog_Head .dialog_Opts{position:absolute;right:5px;top:0;height:21px;cursor:default;}
.dialog_Body{overflow:auto;}
</style>
<script src="/public/js/extend.js"></script>
<script src="/public/js/litewin.js"></script>
</head>
<body>
<div id="operationBar">
	<label><input class="opt" id="showCricle" type="checkbox" />圈</label>
	<label><input class="opt" id="showLine" type="checkbox" checked/>线</label>
	<label><input class="opt" id="showPoint" type="checkbox" />点</label>
	<label><input class="opt" id="showColor" type="checkbox" checked />变色</label>
	<label><input class="opt" id="isRefresh" type="checkbox" />刷新</label>
	<label>外圈半径:<input class="opt optText" id="bigRadius" type="text" value="133" /></label>
	<label>内圈半径:<input class="opt optText" id="smallRadius" type="text" value="140" /></label>
	<label>线长:<input class="opt optText" id="lineLength" type="text" value="123" /></label>
	<label><input id="runBtn" type="button" value="新建"/></label>
</div>
</body>
<script>
function Toy(options){
	this.setOptions(options);
	this.createPad();
	this.draw(true);
}
Toy.prototype = {
	setOptions: function(options) {
		this.options = {
			R:	133, //大圈半径
			r:	140, //小圈半径
			l:	123, //线长
			showPoint: false, //显示小点
			showCricle: false, //显示小圈
			showLine: true, //显示线条
			isRefresh: false, //每次清屏
			showColor : true, //颜色变化
			count : 1500 //绘制次数
		};
		extendCopy(options || {}, this.options);
		//实际占用区域半径的计算
		var delta = 0;
		if(this.options.R > this.options.r){
			delta = (this.options.r > this.options.l) ? 0 : this.options.l - this.options.r;
			this.radius = this.options.R + delta;
		}else{
			delta = (this.options.r > this.options.l) ? this.options.r - this.options.R : this.options.l - this.options.R;
			this.radius = this.options.r + delta;
		}
		this.radius += 10;
		this.color = {
			r : 0,
			g : 0,
			b : 255,
			a : 0.5
		};
		this.v =  20;
		this.colorValue = "rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.color.a+")";
		this.angle = 0;
		this.timePlay = null;
  	},
  	changeColor : function(){
  		//颜色变换模式1
  		this.color.r += this.v;
  		if(this.color.r > 255){
  			this.color.r = 0;
  			this.color.g += this.v;
  		}
  		if(this.color.g > 255){
  			this.color.r = 0;
  			this.color.g = 0;
  			this.color.b += this.v;
  		}
  		if(this.color.b > 255){
  			this.color.r = 0;
  			this.color.g = 0;
  			this.color.b = 0;
  		}
  		this.colorValue = "rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.color.a+")";
  	},
  	changeColor2 : function(){
  		//颜色变换模式2
  		if(Toy.isIn(this.color.r + this.v, -1, 255)){
  			this.color.r += this.v;
  		}else{
  			if(Toy.isIn(this.color.g + this.v, -1, 255)){
  				this.color.g += this.v;
  			}else{
  				if(Toy.isIn(this.color.b + this.v, -1, 255)){
  					this.color.b += this.v;
  				}else{
  					this.v = -this.v;
  				}
  			}
  		}
  		this.colorValue = "rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.color.a+")";
  	},
	createPad : function(isReset){
				if(!isReset){
					this.pad = document.createElement("canvas");
				}
				this.pad.width =  this.radius * 2;
				this.pad.height = this.radius * 2;
				this.ctx = this.pad.getContext('2d');
				this.ctx.lineJoin = 'round';
				this.ctx.lineCap = 'round';
				this.ctx.lineWidth=.5;
				this.ctx.strokeStyle = this.colorValue;
				this.ctx.fillStyle = this.colorValue;
				if(!isReset){
					var dialogs = $class("myDialog"),
						lastOne = dialogs[dialogs.length - 1],
						pos = [0,0],
						scrollT = document.body.scrollTop || document.documentElement.scrollTop;
					if(lastOne){
						var rect = lastOne.getBoundingClientRect();
						if (rect.right > document.documentElement.offsetWidth - lastOne.offsetWidth) {
							pos = [rect.bottom + 10 + scrollT, 0];
						}else{
							pos = [rect.top + scrollT, rect.right+ 10];
						}
					}
					this.myPad = Win.open({
						title : "Pad - " + Toy.t++,
						html : "",
						width : this.pad.width +10,
						height : this.pad.height + 35,
						onclose : this.stop
					}).position("leftTop").css("top:"+pos[0]+"px;left:"+ pos[1] +"px;");
					$class("dialog_Cont",this.myPad.dom)[0].appendChild(this.pad);
				}
			},
	draw : function(isFirst){
				this.ctx.save();
				if(this.options.showColor){
					this.changeColor2();
					this.ctx.strokeStyle = this.colorValue;
					this.ctx.fillStyle = this.colorValue;
				}
				//大圆
				this.ctx.translate(this.radius, this.radius);
				if(isFirst){
					this.ctx.beginPath();
					this.ctx.arc(0,0,this.options.R,0,Math.PI*2,true);
					this.ctx.closePath();
					this.ctx.stroke();
				}
				//小圆
				this.ctx.rotate(-this.angle);
				this.ctx.translate(this.options.R-this.options.r,0);
				if(this.options.showCricle || isFirst){
					this.ctx.beginPath();
					this.ctx.arc(0,0,this.options.r,0,Math.PI*2,true);
					this.ctx.closePath();
					this.ctx.stroke();
				}
				//线
				this.ctx.rotate(this.angle * this.options.R/this.options.r);
				if(this.options.showLine || isFirst){
					this.ctx.beginPath();
					this.ctx.moveTo(0,0);
					this.ctx.lineTo(this.options.l,0);
					this.ctx.stroke();
				}
				//小点
				if(this.options.showPoint || isFirst){
					this.ctx.translate(this.options.l,0);
					this.ctx.beginPath();
					this.ctx.arc(0,0,1,0,Math.PI*2,true);
					this.ctx.fill();
				}
				this.ctx.restore();
				this.angle += 0.2;
				return this;
			},
	move : function(){
			var that = this,
				count = 0,
				_s = function(){
					that.clear(count == 0).draw();
					count ++;
					that.timePlay = setTimeout(_s,50);
					if(that.options.count < count) {
						clearTimeout(that.timePlay)
					};
				}
				_s();
				return this;
		},
	stop : function(){
		clearTimeout(this.timePlay);
		return this;
	},
	clear : function(isInit){
		if(this.options.isRefresh || isInit){
			this.ctx.clearRect(0,0,this.radius * 2,this.radius * 2);
			this.ctx.font = '10px Helvetica';
			this.ctx.fillStyle = '#fff';
			this.ctx.fillText("R: "+this.options.R, this.radius * 2 - 35, this.radius * 2-24 );
			this.ctx.fillText("r : "+this.options.r, this.radius * 2 - 35, this.radius * 2 - 12);
			this.ctx.fillText("l : "+this.options.l, this.radius * 2 - 35, this.radius * 2 );
		}
		return this;
	},
	reset : function(options){
		this.setOptions(options);
		this.createPad(true);
		this.draw(true);
		return this;
	}
}
Toy.isIn = function(v,min,max){
	return (v > min && v < max)
};
Toy.t = new Date();
function getOpt(){
	return {
		R : $id("bigRadius").value - 0 || 133,
		r : $id("smallRadius").value - 0 || 140,
		l : $id("lineLength").value - 0 || 123,
		showPoint: $id("showPoint").checked,
		showCricle: $id("showCricle").checked,
		showLine: $id("showLine").checked,
		isRefresh: $id("isRefresh").checked,
		showColor : $id("showColor").checked
	}
}
window.onload = function(){
	var opt = getOpt();
	var temp1 = new Toy(opt),
		temp2 = new Toy(opt).move(),
	temp3 = new Toy({R:103,r:40,l:50}).move(),
	temp4 = new Toy({R:113,r:140,l:123}).move();
	var inputs = $class("opt");
	for (var i = inputs.length - 1; i >= 0; i--) {
		inputs[i].onchange = function(){
			temp1.reset(getOpt());
		}
	};
	events.addEvent($id("runBtn"),'click', function(){
		new Toy(getOpt()).move();
	});
}
</script>
</html>

IE9 打开后可能需要刷新下才能看见

如果有谁知道这个绘图玩具叫什么名字的，还望告知。

——–
今天在围脖上看见高斯十七岁用圆规画出正十七边形的gif，这才叫牛啊，数学王子真不是盖的。如图