金刚石图纹

最新推荐文章于 2023-09-19 21:22:52 发布

原创最新推荐文章于 2023-09-19 21:22:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

[JavaScript] 同时被 3 个专栏收录

7 篇文章

订阅专栏

[Geometry and Graphics ]

5 篇文章

订阅专栏

[Art Skills]

2 篇文章

订阅专栏

<!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>