shuidong · February 21, 2018 03:32 · Feb 21, 2018 · Feb 20, 2018 · Feb 20, 2018
diff --git a/curveWriter.html b/curveWriter.html
@@ -59,7 +59,7 @@
 <script type="text/javascript">
 	var first = true;
 	//小圆上的落笔点
-	var ratio = 0.8;//0.628;
+	var ratio = 0.628;
 
 	function valueChange(){
 		var value = document.getElementById('penpos').value;
@@ -96,8 +96,8 @@
 		ctx.fillStyle="#BEE7E9";
 		ctx.fill();
 
-		ctx.strokeStyle="#ffffff";
-		ctx.lineWidth= 2;
+		// ctx.strokeStyle="#ffffff";
+		// ctx.lineWidth= 2;
 		ctx.beginPath();
 		ctx.arc(centx, centy, r, 0, 2 * Math.PI);
 		ctx.stroke();
@@ -125,28 +125,37 @@
 	drawOutCircle();
 
 	var x1 = centx;
-	var y1 = centy - 100;//330;
+	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);
-		// if(angle < -360 == true){
-		// 	angle = angle + 360;
-		// }
+/*
+		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;
@@ -155,7 +164,7 @@
 		ctx2.stroke();
 		ctx2.closePath();
 
-		ctx.strokeStyle="#ECAD9E";
+		//ctx.strokeStyle="#ECAD9E";
 		if(first){
 			ctx.moveTo(penx, peny);
 			first = !first;
@@ -164,7 +173,7 @@
 		}
 		ctx.stroke();
 
-	}, 1000/60);
+	}, 1000/100);
 
 </script>
 </body>

diff --git a/html → curveWriter.html b/html → curveWriter.html
diff --git a/html b/html
@@ -0,0 +1,171 @@
+<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.8;//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 - 100;//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;
+
+
+
+	setInterval(function(){
+	// setTimeout(function(){
+		ctx2.clearRect(0,0,w,h);
+
+		angle = (angle + 1);
+		// if(angle < -360 == true){
+		// 	angle = angle + 360;
+		// }
+		x1 = centx + Math.cos(angle / 180 * Math.PI) * d;
+		y1 = centy + Math.sin(angle / 180 * Math.PI) * d;
+
+		drawInnerCircle(x1, y1, r1);
+
+
+		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/60);
+
+</script>
+</body>
+</html>
No results found