html5绘制随机五角星_html5 canvas画五角星（随机生成）

五角星的格定点坐标该如何定位？原理图如下：

源代码：

function canvs_start(){

var c = document.getElementById("star");

var co = c.getContext("2d");

co.fillStyle = "#006699";

co.fillRect(0,0,c.width,c.height);

for (var i = 0;i < 100;i++){

//随机大圆半径R

var cR = Math.random()*10+5;

var cx = Math.random()*c.width;

var cy = Math.random()*c.height;

//随机旋转角度

var ct = Math.random()*360;

star(co,cx,cy,cR,cR/2,ct);

}

//定义五角星函数，js中三角函数角度需要转换为弧度，canvs画布引用，x，y五角星偏移量，R五角星外接大圆半径，r五角星内接小圆半径，rot五角星整体旋转角度

function star(canvs,x,y,R,r,rot){

canvs.beginPath();

for (var i = 0;i<5;i++){

canvs.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);

//此处的(18+i*72-rot)为五角星外顶点与中心水平线夹角度数(不是弧度，假设旋转角度rot为0，相当于正五角星)，外顶点x坐标每次变化72度

//五角星外顶点(x,y)偏移量

canvs.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

//此处的(54+i*72-rot)为五角星内顶点与中心水平线夹角度数(不是弧度，假设旋转角度rot为0，相当于正五角星)，内顶点x坐标每次变化72度

//五角星内顶点(x,y)偏移量

}

canvs.closePath();

//效果显示

canvs.fillStyle = "#fd5";

canvs.strokeStyle = "#fb5";

canvs.lineWidth = 3;

canvs.lineJoin = "round";

//执行

canvs.fill();

canvs.stroke();

}

效果如下图所示：

html5绘制随机五角星_html5 canvas画五角星（随机生成）相关推荐

html5绘制随机五角星_HTML5 canvas绘制五角星的方法
这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTM ...
python123绘制五角星_Python的画五角星
前言我们刚学画画的时候肯定学过五角星,想必画个五角星太简单了,但是Python呢? 分析: 五角星的每一个角都是相等的,36°,外角144° 把最左边的点当做(0, 0) 实践: 1.前进 impo ...
怎么有python画五角星_Python的画五角星
前言我们刚学画画的时候肯定学过五角星,想必画个五角星太简单了,但是Python呢? 分析: 五角星的每一个角都是相等的,36°,外角144° 把最左边的点当做(0, 0) 实践: 1.前进 impo ...
python画五角星-Python的画五角星
前言我们刚学画画的时候肯定学过五角星,想必画个五角星太简单了,但是Python呢? 分析: 五角星的每一个角都是相等的,36°,外角144° 把最左边的点当做(0, 0) 实践: 1.前进 impo ...
html5绘制随机五角星_脑残无极限，用HTML5 CANVAS画五角星！
(效果图) 当我开始研究HTML5的时候,canvas在第一时间就吸引住我了.哇塞,这东西未来绝对能取代WINDOWS的画图(小畫家)工具的! 于是本着探索的精神,我重新捡回了中学时期的三角函数,准备 ...
html5绘制随机五角星_HTML5 canvas基本绘图之绘制五角星
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控 ...
html5 canvas画五角星（美国队长）
画一波五角星: 美国队长图标原理: (1)根据五角星的顶点,外顶点5个,内顶点5个,分成内外圆 (2)由三角函数可表示出每个顶点的位置 (3)利用canvas的lineTo()接口画图上代码: ...
Canvas 画五角星
前言几何模型绘制拓展封装前言学习 canvas,更多的是需要动手实践,下面就从一个相对简单的例子:五角星开始吧! 不懂 canvas 的同学,请先学习:Canvas 画布几何模型由上图 ...
python绘制六角星_python画五角星和六角星程序 | 学步园
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...

html5绘制随机五角星_html5 canvas画五角星（随机生成）

html5绘制随机五角星_html5 canvas画五角星（随机生成）相关推荐

最新文章

热门文章