几何知识介绍

任意正多边形规律

1、任意正多边形都存在与一个外接圆。
2、外接圆的圆心为正多边形的中心、重心（到各边的距离相等，到各角的距离相等=外接圆半径）
3、中心到各个角的连线将正多边形n等分（n = 正多边形边数），同时将圆心角（2π）n等分。
我们已正八边形为例，如下图所示：

坐标表达方式

1、坐标系上任意一点到圆心的连线，我们可以用 θ 来表示。
2、上述连线上的任意点的坐标可以表示为（r * cosθ，r * sinθ）,其中r是该点到(0,0)的距离，θ是直线与x坐标轴的夹角（0 <= θ <= 2π）

绘图方式

假设我们要绘制一个正n边形，他的外接圆半径为r，圆心角被平分为θ（θ = 2π/n）。
那么正多边形所有的顶点坐标分别是：
(r * cos(θ * 0)，r * sin(θ * 0))
(r * cos(θ * 1)，r * sin(θ * 1))
(r * cos(θ * 2)，r * sin(θ * 2))
…
(r * cos(θ * n)，r * sin(θ * n))
我们只需要将这些点连起来就可以获得一个正多边形

代码

代码一（没有摆正）

<!DOCTYPE html>
<html><body><!--定义画布容器，给个边框省的你们找不到--><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>//获取画布对象var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var canvasSide = 400,circleCenterX = canvasSide/2,circleCenterY = canvasSide/2;var sideLength = 200,sideCount = 6,r = sideLength/(2*Math.sin(Math.PI/4));var a = 2 * Math.PI / sideCount ; // 角度ctx.beginPath();for( var i = 0; i <= sideCount; i++ ){var x = circleCenterX + r * Math.cos(a * i); var y = circleCenterY + r * Math.sin(a * i);if (i == 0){ctx.moveTo(x,y); // 移动到第一个顶点   }else{ctx.lineTo(x,y); //    }}ctx.closePath();ctx.stroke();</script></body></html>

画完之后发现一个问题，正多边形它摆放位置不正，研究一番发现如果这样写第一个点一定是落在x轴上（y = r*sin0° = 0）的，于是进行改造让首次的点摆正它更新后代码如下：

代码二（摆正了解决了强迫症的问题）

<!DOCTYPE html>
<html><body><!--定义画布容器，给个边框省的你们找不到--><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>//获取画布对象var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var canvasSide = 400,circleCenterX = canvasSide/2,circleCenterY = canvasSide/2;var sideLength = 200,sideCount = 6,r = sideLength/(2*Math.sin(Math.PI/4));var a = 2 * Math.PI / sideCount ; // 角度var offset =  - Math.PI/2;if(sideCount % 2 ==0){offset = - Math.PI/2 + a/2;}ctx.beginPath();for( var i = 0; i <= sideCount; i++ ){var x = circleCenterX + r * Math.cos(a * i + offset); var y = circleCenterY + r * Math.sin(a * i + offset);if (i == 0){ctx.moveTo(x,y); // 移动到第一个顶点   }else{ctx.lineTo(x,y); //    }}ctx.closePath();ctx.stroke();</script></body></html>

Canvas绘制任意正多边形相关推荐

利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件.首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图 ...
canvas绘制图像image
canvas绘制图像image 1.image的三个script的基本语法准备工作:1.定义画布长度,获取2D绘图环境 2.建立对面对象,设置图片路径 3.载入图片,开始绘制 a.简单的画布 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
html5的canvas绘制时钟
为什么80%的码农都做不了架构师?>>> 最近一直在学习html5,学到了html5的canvas标签,这个画布真的是很强大,它有对应的javascript的api的支持,你可 ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
小程序 uni canvas绘制圆角图片圆角矩形
小程序 uni canvas绘制圆角图片圆角矩形获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）
Html5_convas var elem = document.getElementById("myConvas"); if (elem && elem.getC ...
canvas绘制折线路径动画
最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能.或者使用canvas绘制,结合路径数学计算来实现. 如果用canva ...
用html制作阴影效果,使用HTML5 Canvas绘制阴影效果的方法
这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下创建阴影效果需要操作以下4个属性: ...

Canvas绘制任意正多边形

Canvas任意正多边形绘制