Last active
February 21, 2018 03:32
-
-
Save shuidong/04b6d6909b95e246a44e8495824145c3 to your computer and use it in GitHub Desktop.
繁花曲线简易模拟
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment