shuidong/curveWriter.html

## curveWriter.html
<html>

<head>
	<meta charset="utf-8">
	<title>繁花</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="full-screen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="360-fullscreen" content="true" />
<style type="text/css">

	 #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 0px;
            background: #ffffff;
            border: thin solid #aaaaaa;
        }

        #canvasdy {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 0px;
            border: thin solid #aaaaaa;
        }

        #ctrldiv {
        	position: absolute;
            left: 0px;
            top: 0px;
            margin: 0px;
        }


</style>
<body>
<canvas id="canvas" width=600 height=1000 style="border: 1px solid #ccc;"></canvas>
<canvas id="canvasdy" width=600 height=1000 style="border: 1px solid #ccc;"></canvas>

<script type="text/javascript">
	function valueChange(){
		var value = document.getElementById('penpos').value;
		console.log(value);
	}
	</script>
<div id='ctrldiv'>
<input type="button" value="清空停止" onclick="alert('TODO')"><br>
<input type="button" value="开始画" onclick="alert('TODO')"><br>
内圆半径 <input type="range" id="innerR" min="1" max="10" /><br>
画笔位置 <input type="range" id="penpos" min="1" max="11" oninput="valueChange()" onchange="valueChange()"/><br>
绘制速度<input type="range" id="penspeed" min="1" max="10" /><br>

</div>

<script type="text/javascript">
	var first = true;
	//小圆上的落笔点
	var ratio = 0.628;

	function valueChange(){
		var value = document.getElementById('penpos').value;
		ratio = value * 0.1;
		// console.log(value);
	}

	var clientWidth = document.body.offsetWidth;;
	var clientHeight = document.body.offsetHeight;

	var canvas=document.getElementById('canvas');
	canvas.setAttribute('width',clientWidth +'px');
	canvas.setAttribute('height',clientHeight +'px');

	var ctx=canvas.getContext('2d');

	var canvas2=document.getElementById('canvasdy');
	canvas2.setAttribute('width',clientWidth +'px');
	canvas2.setAttribute('height',clientHeight +'px');
	var ctx2=canvas2.getContext('2d');
	ctx2.strokeStyle="#F4606C";
	ctx2.lineWidth= 4;


	var w = clientWidth;
	var h = clientHeight;

	var centx = w >> 1;
	var centy = h >> 1;
	var r = centx;

	function drawOutCircle(){
		ctx.rect(0, 0, w, h);
		ctx.fillStyle="#BEE7E9";
		ctx.fill();

		// ctx.strokeStyle="#ffffff";
		// ctx.lineWidth= 2;
		ctx.beginPath();
		ctx.arc(centx, centy, r, 0, 2 * Math.PI);
		ctx.stroke();
		ctx.closePath();

		// ctx.moveTo(centx, centy);
		// ctx.lineTo(60, 80);
		// ctx.stroke();
	}

	function drawInnerCircle(x, y, r1){
		ctx2.beginPath();
		ctx2.arc(x, y, r1, 0, 2 * Math.PI);
		ctx2.stroke();
	}

	function step(){

	}

	function draw(){

	}

	drawOutCircle();

	var x1 = centx;
	var y1 = centy + 50;//330;
	var angle = 0;
	var distancePower = Math.pow(Math.abs(x1 - centx), 2) + Math.pow(Math.abs(y1 - centy), 2);
	var d = Math.pow(distancePower, 0.5);
	var r1 = r - d;


	var roundCount = 0;
	var dir = 1;
	setInterval(function(){
	// setTimeout(function(){
		ctx2.clearRect(0,0,w,h);

		angle = (angle + 1);
/*
		d += 0.01;
		r1 = r - d;
*/
		x1 = centx + Math.cos(angle / 180 * Math.PI) * d;
		y1 = centy + Math.sin(angle / 180 * Math.PI) * d;

		drawInnerCircle(x1, y1, r1);

/*
		roundCount = Math.round(angle / 10);
		//roundCount = roundCount % 5;
		ratio = 0.6 + (dir * roundCount * 0.01);
		if(ratio > 0.9 || ratio < 0.2){
			dir *= -1;
		}
*/
		var angle2 = -angle / 180 * Math.PI * r / r1;
		var penx = x1 + Math.cos(angle2) * r1 * ratio;
		var peny = y1 + Math.sin(angle2) * r1 * ratio;
		ctx2.moveTo(x1, y1);
		ctx2.lineTo(penx, peny);
		ctx2.stroke();
		ctx2.closePath();

		//ctx.strokeStyle="#ECAD9E";
		if(first){
			ctx.moveTo(penx, peny);
			first = !first;
		}else{
			ctx.lineTo(penx, peny);
		}
		ctx.stroke();

	}, 1000/100);

</script>
</body>
</html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>繁花</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="full-screen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="360-fullscreen" content="true" />
	<style type="text/css">

	#canvas {
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	background: #ffffff;
	border: thin solid #aaaaaa;
	}

	#canvasdy {
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	border: thin solid #aaaaaa;
	}

	#ctrldiv {
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	}


	</style>
	<body>
	<canvas id="canvas" width=600 height=1000 style="border: 1px solid #ccc;"></canvas>
	<canvas id="canvasdy" width=600 height=1000 style="border: 1px solid #ccc;"></canvas>

	<script type="text/javascript">
	function valueChange(){
	var value = document.getElementById('penpos').value;
	console.log(value);
	}
	</script>
	<div id='ctrldiv'>
	<input type="button" value="清空停止" onclick="alert('TODO')"><br>
	<input type="button" value="开始画" onclick="alert('TODO')"><br>
	内圆半径 <input type="range" id="innerR" min="1" max="10" /><br>
	画笔位置 <input type="range" id="penpos" min="1" max="11" oninput="valueChange()" onchange="valueChange()"/><br>
	绘制速度<input type="range" id="penspeed" min="1" max="10" /><br>

	</div>

	<script type="text/javascript">
	var first = true;
	//小圆上的落笔点
	var ratio = 0.628;

	function valueChange(){
	var value = document.getElementById('penpos').value;
	ratio = value * 0.1;
	// console.log(value);
	}

	var clientWidth = document.body.offsetWidth;;
	var clientHeight = document.body.offsetHeight;

	var canvas=document.getElementById('canvas');
	canvas.setAttribute('width',clientWidth +'px');
	canvas.setAttribute('height',clientHeight +'px');

	var ctx=canvas.getContext('2d');

	var canvas2=document.getElementById('canvasdy');
	canvas2.setAttribute('width',clientWidth +'px');
	canvas2.setAttribute('height',clientHeight +'px');
	var ctx2=canvas2.getContext('2d');
	ctx2.strokeStyle="#F4606C";
	ctx2.lineWidth= 4;


	var w = clientWidth;
	var h = clientHeight;

	var centx = w >> 1;
	var centy = h >> 1;
	var r = centx;

	function drawOutCircle(){
	ctx.rect(0, 0, w, h);
	ctx.fillStyle="#BEE7E9";
	ctx.fill();

	// ctx.strokeStyle="#ffffff";
	// ctx.lineWidth= 2;
	ctx.beginPath();
	ctx.arc(centx, centy, r, 0, 2 * Math.PI);
	ctx.stroke();
	ctx.closePath();

	// ctx.moveTo(centx, centy);
	// ctx.lineTo(60, 80);
	// ctx.stroke();
	}

	function drawInnerCircle(x, y, r1){
	ctx2.beginPath();
	ctx2.arc(x, y, r1, 0, 2 * Math.PI);
	ctx2.stroke();
	}

	function step(){

	}

	function draw(){

	}

	drawOutCircle();

	var x1 = centx;
	var y1 = centy + 50;//330;
	var angle = 0;
	var distancePower = Math.pow(Math.abs(x1 - centx), 2) + Math.pow(Math.abs(y1 - centy), 2);
	var d = Math.pow(distancePower, 0.5);
	var r1 = r - d;


	var roundCount = 0;
	var dir = 1;
	setInterval(function(){
	// setTimeout(function(){
	ctx2.clearRect(0,0,w,h);

	angle = (angle + 1);
	/*
	d += 0.01;
	r1 = r - d;
	*/
	x1 = centx + Math.cos(angle / 180 * Math.PI) * d;
	y1 = centy + Math.sin(angle / 180 * Math.PI) * d;

	drawInnerCircle(x1, y1, r1);

	/*
	roundCount = Math.round(angle / 10);
	//roundCount = roundCount % 5;
	ratio = 0.6 + (dir * roundCount * 0.01);
	if(ratio > 0.9 \|\| ratio < 0.2){
	dir *= -1;
	}
	*/
	var angle2 = -angle / 180 * Math.PI * r / r1;
	var penx = x1 + Math.cos(angle2) * r1 * ratio;
	var peny = y1 + Math.sin(angle2) * r1 * ratio;
	ctx2.moveTo(x1, y1);
	ctx2.lineTo(penx, peny);
	ctx2.stroke();
	ctx2.closePath();

	//ctx.strokeStyle="#ECAD9E";
	if(first){
	ctx.moveTo(penx, peny);
	first = !first;
	}else{
	ctx.lineTo(penx, peny);
	}
	ctx.stroke();

	}, 1000/100);

	</script>
	</body>
	</html>