正多边形

最新推荐文章于 2019-03-28 00:39:46 发布
最新推荐文章于 2019-03-28 00:39:46 发布
阅读量493 收藏 1
点赞数 1
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/84279731
版权

正多边形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		  body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
    }
    
    canvas {
        border: 1px solid rgba(0, 0, 0, .4);
        box-shadow: 0 0 3px rgba(0, 0, 0, .15);
        border-radius: 5px;
    }
    label,
    input,
    button,
    select {
        display: inline-block;
        vertical-align: middle;
    }
    .wrapper div {
        margin: 15px 0 10px;
    }
    input[type="number"] {
        border:1px solid #ccc;
        border-radius: 3px;
        padding: 3px 5px;
        width: 50px;
    }
    input[type="number"]:focus {
        outline: none 0;
        border-color: #008fb5;
        box-shadow: 0 0 3px #008fb5;
    }
    button {
        border-radius: 3px;
        border: none;
        background: #008fb5;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
        box-shadow: 0 1px 0 rgba(0,0,0,.1) ,0 1px 0 rgba(0,0,0,.1);
    }
    button:focus,
    button:active {
        outline: none 0;
    }
	</style>
</head>
<body>
	 <div class="wrapper">
        <div>
            <label for="num">边数:</label>
            <input type="number" name="num" value="3" id="num">
            <label for="radius">半径:</label>
            <input type="number" name="radius" value="100" id="radius">
            <label for="sideIn">内切:</label>
            <input type="number" name="sideIn" value="1" id="sideIn">
            <label for="alpha">Alpha:</label>
            <input type="number" name="alpha" value="0" id="alpha">
            <label for="style">style:</label>
            <select name="style" id="style">
                <option value="fill">fill</option>
                <option value="stroke">stroke</option>
            </select>
            <label for="arcBox">外圆:</label>
            <input type="checkbox" name="arcBox"  id="arcBox">
            <button type="button" name="draw" id="draw">Draw</button>
        </div>
        <canvas id="canvasOne" width="700" height="300">
        </canvas>
    </div>
</body>
</html>

<script>

	  window.addEventListener('load', eventWindowLoaded, false);

    var Debugger = function() {};

    Debugger.log = function(message) {
        try {
            console.log(message);
        } catch (exception) {
            return;
        }
    }

    function eventWindowLoaded() {
        canvasApp();
    }

    function canvasApp() {
        var theCanvas = document.getElementById('canvasOne');
        var ctx = theCanvas.getContext('2d');

        Debugger.log('Drawing Canvas');

        var w = theCanvas.width,
            h = theCanvas.height,
            btn = document.getElementById('draw'),
            radius = document.getElementById('radius'),
            num = document.getElementById('num'),
            arcBox = document.getElementById('arcBox'),
            style = document.getElementById('style'),
            alpha = document.getElementById('alpha'),
            sideIndent = document.getElementById('sideIn'),
            xCenter = w / 2,
            yCenter = h / 2;


        btn.addEventListener('click', getValue, false);

        function getValue(){
            var numVal = num.value,
                rVal = radius.value,
                arcBoolean = arcBox.checked,
                styleVal = style.options[style.selectedIndex].value,
                alphaVal = alpha.value,
                sideIndentVal = sideIndent.value;

            if (numVal < 3) {
                alert("Please enter a number larger than 2!");
                return;
            }

            if (rVal <= 0) {
                alert("Please enter a number of radius larger than 0!");
                return;
            }

            if (sideIndentVal < 0 || sideIndentVal > 1) {
                alert("Please enter a number of sideIndent 0 ~ 1 !");
                return;
            }

            ctx.clearRect(0, 0, w, h);

            if (styleVal === 'fill') {
                drawFillStarPolygon(ctx, xCenter, yCenter, rVal, numVal, sideIndentVal, alphaVal, arcBoolean);
            }
            if (styleVal === 'stroke') {
                drawStrokeStarPolygon(ctx, xCenter, yCenter, rVal, numVal, sideIndentVal, alphaVal, arcBoolean);
            }
            
        }

        // @param {CanvasRenderingContext2D} ctx
        // @param {Number} xCenter 中心坐标X点
        // @param {Number} yCenter 中心坐标Y点
        // @param {Number} radius 外圆半径
        // @param {Number} sides 多边形边数
        // @param {Number} sideIndent (0 ~ 1)
        // @param {Number} alpha 角度 默认270度
        // @param {Boolean} arc 是否显示外圆
        function drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
            
            var sideIndentRadius = radius * (sideIndent || 1);
            var radAngle = alpha ? alpha * Math.PI / 180 : -Math.PI / 2;
            var radAlpha = Math.PI * 2 / sides / 2;

            ctx.save();
            ctx.beginPath();

            var xPos = xCenter + Math.cos(radAngle) * radius;
            var yPos = yCenter + Math.sin(radAngle) * radius;

            ctx.moveTo(xPos, yPos);

            for (var i = 1; i <= sides * 2; i++) {
                var rad = radAlpha * i + radAngle;
                var len = (i % 2) ? sideIndentRadius : radius;
                var xPos = xCenter + Math.cos(rad) * len;
                var yPos = yCenter + Math.sin(rad) * len;

                ctx.lineTo(xPos, yPos);

            }

            ctx.closePath();
        }

        // 绘制填充的多边形
        // @param {CanvasRenderingContext2D} ctx
        // @param {Number} xCenter 中心点X坐标点
        // @param {Number} yCenter 中心点Y坐标点
        // @param {Number} radius 外圆半径
        // @param {Number} sides 多边形边数
        // @param {Number} sideIndent (0 ~ 1)
        // @param {Number} alpha 角度 默认270度
        // @param {Boolean} arc 是否显示外圆
        function drawFillStarPolygon(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
            drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc);
            ctx.fill();

            // 画外接圆
            if (arc) {
                ctx.beginPath();
                ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, true);
                ctx.arc(xCenter, yCenter, radius * sideIndent, 0, 2 * Math.PI, true);
                ctx.stroke();
            }
        }

        // 绘制描边的多边形
        // @param {CanvasRenderingContext2D} ctx
        // @param {Number} xCenter 中心点X坐标点
        // @param {Number} yCenter 中心点Y坐标点
        // @param {Number} radius 外圆半径
        // @param {Number} sides 多边形边数
        // @param {Number} sideIndent (0 ~ 1)
        // @param {Number} alpha 角度 默认270度
        // @param {Boolean} arc 是否显示外圆
        function drawStrokeStarPolygon(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc) {
            drawStarPolygons(ctx, xCenter, yCenter, radius, sides, sideIndent, alpha, arc);
            ctx.stroke();

            // 画外接圆
            // if (arc) {
            //     ctx.beginPath();
            //     ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, true);
            //     ctx.arc(xCenter, yCenter, radius * sideIndent, 0, 2 * Math.PI, true);
            //     ctx.stroke();
            // }
        }



        function drawScreen() {

            ctx.fillStyle = '#f36';
            ctx.strokeStyle = '#df0';
            

        }

        drawScreen();
    }
</script>
诸葛苍穹
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
求正多边形各顶点的坐标（数学）
wuprogrammer的博客
10-02 9124
1.通用公式 （1）正多边形的中心点为（0，0） for (i = 0; i < n; i++) { printf("%f %f\n", r * Math.cos(2 * Math.PI * i / n), r * Math.sin(2 * Math.PI * i / n)); } x轴坐标为 r * Math.cos(2 * Math.PI * i / n) y轴坐标为 r * Math.sin(2 * Math.PI * i / n) （2）正多边形的中心点为（a，b） for (i = 0
如何画一个正多边形
张新强的CSDN博客
12-13 4540
本文由BarryZhang原创，同时首发于barryzhang.com，简书，非商业转载请注明作者和原文链接。 场景给定一个指定的正方形的区域，要求在该区域内画一个正N边形（正三角形、正方形、正五边形……） public static void drawPolygon (RectF rect, Canvas canvas, Paint p, int n) { // draw…… }分析要用到
正多边形面积
chuang_pin的博客
03-28 844
求正多边形面积 import java.util.Scanner; //import java.math*; public class MianJi { public static void main(String [] args) { Scanner input=new Scanner(System.in); System.out.println(“请输入多边形的边数： n”); int n=i...
正多边形的无缝完美拼接
趣味编程
03-07 6831
正多边形的无缝完美拼接图中展示的是自然界中在平面上仅存的4种无缝拼接正多边形。（在球面上还存在其他的，比如足球为6——5）  试着垒一种拼图游戏，拿若干个任意正多边形让它们拼接在一起，要求是它们中间不能留出
定边长、定面积绘制正多边形
02-10
根据给定面积绘制不同边数的正多边形，保证多边形面积相同 根据给定边长绘制不同边数的正多边形，保证多边形边长相同
scratch创意编程《画任意正多边形》的教学设计.docx
11-25
Scratch 创意编程《画任意正多边形》的教学设计 本教学设计旨在帮助学生掌握 Scratch 编程语言，培养学生的计算思维能力和信息意识。通过本教学设计，学生将学会使用模块中的指令，学会使用模块中的和指令，学会...
OpenCV绘制正多边形的方法
08-26
主要为大家详细介绍了OpenCV绘制正多边形的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
画正多边形
07-28
本教程将专注于使用C#语言在Windows窗体应用中绘制正多边形，这涉及到自定义边数和大小的功能。让我们深入探讨这个过程以及相关知识点。 首先，要实现这个功能，我们需要了解Windows窗体应用的基本结构，这通常包括...
CocosCreator 正多边形遮罩Shader
01-22
在CocosCreator 2.4.7中，正多边形遮罩Shader是一种技术，用于将精灵（Sprite）渲染成正多边形形状，从而实现更高效和灵活的图形裁剪效果。相比于传统的mask裁剪，它能降低DrawCall，提高游戏性能。DrawCall是图形...
基于正多边形搜索算法的圆度误差评定.pdf
02-16
基于正多边形搜索算法的圆度误差评定是一种用于精确计算和评估圆度误差的方法，主要应用于机械工程、精密测量和质量控制等领域。圆度误差是衡量实际工件圆轮廓与理想圆之间的偏差，对旋转轴线截面形状的精度具有重要...
基于几何正多边形评价法的企业安全文化评价
07-15
为了科学准确的对企业安全文化进行评价,笔者采用了几何正多边形评价法;根据已有资料,对企业安全文化选取9个评价指标,并采用调查问卷法对各个指标进行量化,最终反映在几何正多边形上。结果表明,几何正多边形评价法...
中考数学试题分类汇编34 正多边形与圆2精选.doc
09-25
【正多边形与圆】是中考数学中的一个重要知识点，主要涉及到几何图形的性质和相互关系。这个专题通常包括以下几个核心概念： 1. **正多边形**：指所有边等长、所有角等大的多边形，如题目中提到的正六边形。正...
第三章 第八节 圆内接正多边形练习题及答案解析精选.doc
09-26
"圆内接正多边形练习题及答案解析精选" 圆内接正多边形是一种特殊的几何图形，它是指在圆内接的正多边形。这种图形在数学和几何学中有着重要的应用。下面我们将对圆内接正多边形的练习题及答案进行解析。 圆内接正...
数学九年级上人教新课标24.3正多边形和圆习题精选精选.doc
09-26
在数学的几何领域，正多边形和圆是重要的概念，尤其在初中九年级的课程中。本习题集主要围绕这些主题展开，旨在帮助学生深入理解和应用相关知识。 首先，我们来澄清一些基本概念。正多边形指的是各边等长、各角等大...
正几边形可以实现无缝拼接？
weixin_30563319的博客
10-28 496
正n边形内角为(n-2)*180/n，要保证可以无缝拼接，就是一个圆可以被整数个n边形内角拼接，即360=k*(n-2)*180/n => 2n=k(n-2)。（摘自http://blog.csdn.net/ray58750034/article/details/1365813） 以下代码表明：只有正3、4、6边形可以实现无缝拼接。 #include <iost...
【转载】canvas 绘制正多边形
huanshiwushuang的博客
04-14 360
原文地址：canvas标签画正多边形函数 绘制正多边形" TITLE="【转载】canvas 绘制正多边形" /> 绘制正多边形" TITLE="【转载】canvas 绘制正多边形" />
SGU 120. Archipelago 计算几何 正n边形个顶点坐标
御坂美琴o((≧▽≦o)
05-03 1497
题目链接点这儿 QAQ这题做的真痛苦。。。 题意就是
[ACM]判断正多边形
yuchenchenyi的博客
12-13 1320
Problem Description 给出样例个数T，n个点及n个点的坐标xi,yi，判断这n个点能否构成正n边形。 若能够，输出“Yes.”，否则输出“No.” Input 第一行为样例个数T，其后T组数据，每组数据以n开头。 每组数据包括n行表示n个点，每行两个整数xi，yi分别表示该点的x，y坐标。 1 1 1 Output 若能够构成正n边形，输出
正多边形matlab
最新发布
09-13
在MATLAB中生成正多边形可以使用以下步骤： 1. 首先，确定正多边形的中心点坐标和边长。 2. 使用 linspace 函数生成一个从 0 到 2π 的向量，表示正多边形的角度。 3. 使用 sin 和 cos 函数根据上一步生成的角度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值