Skip to content

Instantly share code, notes, and snippets.

@shuidong shuidong/curveWriter.html
Last active Feb 21, 2018

Embed
What would you like to do?
繁花曲线简易模拟
<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
You can’t perform that action at this time.