标签：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.info {
position: relative;
margin-bottom: 5px;
}
.info input {
width: 60px;
height: 20px;
}
#show {
border: 3px solid #bababa;
}
</style>
</head>
<body id="body">
<div id="get-info">
<div class="info">
<label>Node Num: </label><input id="node-num-input"/>
</div>
<div class="info">
<label>Radius: </label><input id="radius-input"/>
</div>
<button id="submit-info">submit</button>
</div>
<canvas id="show" width="500px" height="500px"></canvas>
<script type="text/javascript">
function draw( node_num, radius ) {
var canvas = $( "#show" )[0];
var context = canvas.getContext( "2d" );
var thta = 2.0 * Math.PI / node_num;
var points = [];
context.clearRect( 0, 0, 500, 500 );
for ( var i = 0; i < node_num; ++i ) {
points.push( {
"X" : radius * Math.cos( i * thta ) + 250,
"Y" : radius * Math.sin( i * thta ) + 250
} );
}
context.beginPath();
for ( var i = 0; i < node_num - 1; ++i ) {
for ( var j = i + 1; j <= node_num - 1; ++j ) {
context.moveTo( Math.round( points[i]["X"] ), Math.round( points[i]["Y"] ) );
context.lineTo( Math.round( points[j]["X"] ), Math.round( points[j]["Y"] ) );
}
}
context.closePath();
context.stroke();
}
$( "#submit-info" ).click(
function () {
var node_num = $( "#node-num-input" ).val();
var radius = $( "#radius-input" ).val();
draw( node_num, radius );
}
);
</script>
</body>
</html>版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：
原文地址：http://blog.csdn.net/pandora_madara/article/details/47275283
