canvas实现五角星

时间:2019-09-24
本文章向大家介绍canvas实现五角星，主要包括canvas实现五角星使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

用变量的方式绘制一个五角星，首先求五角星十个顶点的坐标。

可以把每个五角星看成外顶点用一个大圆绘制，内顶点用小圆绘制。在坐标系（0deg）下，根据每个顶点的角度和圆的半径求得x,y。

 

而每个大顶点相差72deg(180/5),每个小顶点也差72deg.所以下一个顶点的度数就是当前点加上72deg.(逆时针)

 代码实现



　drawStar(context, 300, 150, 400, 400);


function drawStar(context, R, r, x, y) {
            context.beginPath();
            for (var i = 0; i < 5; i++) {
                context.lineTo(x + Math.cos((18 + 72 * i) / 180 * Math.PI) * R,
                               y - Math.sin((18 + 72 * i ) / 180* Math.PI)* R);
                context.lineTo(x + Math.cos((54 + 72 * i) / 180 * Math.PI)  * r,
                               y - Math.sin((54 + 72 * i) / 180 * Math.PI) * r);
            }
            context.closePath();
            context.stroke();
        }




						



						

						原文地址：https://www.cnblogs.com/jiaobaba/p/11579621.html						

                        

                    

				

			

			

    
随机文章

	

		

			
		

		

			

    		

		

	



				

		
本站知识点必读

		
		

	

		

		

			

			
			



			

				

					最近更新