Canvas 画正n角星

看到canvas画图是不由得想起之前的gostscript，两者很类似，借鉴crystalhuhu 的五角星画法

先讲如何画一个正规的五角星

在五角星的内外画两个圆，五角星有五个角，360/5=72度

所以得出这两个角的度数

然后算出这两个点坐标

角度转弧度

角度/180*Math.PI

所以外顶点坐标x: Math.cos( (18+72*i)/180*Math.PI) * R

y: Math.sin((18+72*i)/180*Math.PI) * R

所以内顶点坐标 x: Math.cos( (54+72*i)/180*Math.PI) * r

y: Math.sin((54+72*i)/180*Math.PI) * r

画完五角星后我就想何不画个n角星，说画就画：

推倒下N角星的顶点坐标：

三角星外圆内圆中对应的顶点坐标相差120度外圆起始角30° 内圆起始角60° 30+60 = 360/3=120

四角星外圆内圆中对应的顶点坐标相差90度外圆起始角22.5° 内圆起始角67.5° 30+60 = 360/4=90

五角星外圆内圆中对应的顶点坐标相差72度外圆起始角18° 内圆起始角54° 18+54= 360/5 =72

六角星外圆内圆中对应的顶点坐标相差60度外圆起始角15° 内圆起始角45° 15+45= 360/6 =60

所以外定点坐标x: Math.cos(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

所以内定点坐标x: Math.cos(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

简化后就是：

外定点坐标x: Math.cos(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

内定点坐标x: Math.cos(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

那么整段代码如下（当n>=3的时候正确）：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="">
</head>
<body><canvas id="mycanvas"></canvas><script>var canvas = document.getElementById('mycanvas');canvas.width=800;//设置画布的宽度  canvas.height=800;//设置画布的高度var cxt = canvas.getContext('2d');createStar(cxt,4,100,300,400,400,10);function createStar(context,n,r,R,x,y,lwid) {/*content 画图对象n 星型顶点数r 内圆半径R 外圆半径x 星型中心点x坐标y 星型中心店y坐标lwid lineWidth*/cxt.save();cxt.lineWidth=lwid;cxt.beginPath();cxt.translate(x,y);for(var i=0;i<n;i++){cxt.lineTo(Math.cos(((1/4 + i)*2*Math.PI/n))*R,-Math.sin(((1/4 + i)*2*Math.PI/n))*R);cxt.lineTo(Math.cos(((3/4 + i)*2*Math.PI/n))*r,-Math.sin(((3/4 + i)*2*Math.PI/n))*r);} cxt.closePath(); cxt.stroke();cxt.restore();}       </script>
</body>
</html>

Canvas 画正n角星相关推荐

WPF画N角芒星，正N角星
计算顶部三角形坐标方法: 1 /// <summary> 2 /// 获取顶三角形坐标 3 /// </summary> 4 /// <param name=" ...
Python之OpenGL笔记(34)：采用了顶点常量属性方法画多彩六角星
一.目的 1.采用了顶点常量属性方法画多彩六角星: 二.程序运行结果三.顶点常量属性吴亚峰<OpenGL ES 3.x游戏开发>(上卷)内容前面的很多案例中,给每一个顶点 ...
openGL画一个正5角星
既然安装好了环境就免不得要用一下吧!所以写了以下的这个demo! 在linux下使用也很简单.直接创建一个.c的文档,把以下的代码复制进去.然后打开终端进入该文档的目录在终端输入 gcc -lg ...
canvas 画正圆
宽高要在canvas标签上通过width 和height属性定义,通过style定义就会出椭圆 <canvas ref='countDown' width="134" hei ...
android 自定义View六芒星（六角星）
public class Xing2View extends CustomView {public Xing2View(Context context) {super(context);}@Overr ...
教你用canvas画n角星星
首先我们要明白星星的结构,星星有很多种,五角星是最常用的一种星星,后面还有三角星六角星等等,但是只要是星星都是高度对称的,所以只要是星星结构的东西我们就能按照一定规则将其画出. 我们看一下一个n角星的 ...
画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小源代码: fun ...
python画八角星_Goc-N角星的绘制
从五角星说起谈到N角星,习惯性的我们会先想到五角星.你可能觉得应该这样绘制: 代码也会相当的简洁: 六角星和八角星我们能用同样的方法画六角星吗?NO!五角星可以一笔画出来,笔画不重复,而六角星不行 ...
python六角星_在Python中使用龟画出不同边长的六角星。
希望我能解释得很好.我目前使用helper函数在python的turtle graphics窗口中绘制一个六角星.首先,我们必须创建一个绘制三角形的函数.这是我的代码:在Python中使用龟画出不同边 ...

Canvas 画正n角星

Canvas 画正n角星

Canvas 画正n角星相关推荐

最新文章

热门文章