案例四、1.使用Canvas画一个五角星

最新推荐文章于 2024-01-18 10:25:59 发布

画一生情入颜容

最新推荐文章于 2024-01-18 10:25:59 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

文章标签： canvas 画图

本文链接：https://blog.youkuaiyun.com/csdn_zsdf/article/details/62237488

本文介绍如何利用HTML5 Canvas元素画一个五角星，并通过数学公式计算坐标。详细讲解了如何通过循环和角度转换实现五角星的绘制，以及如何使五角星旋转，增加图形的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Cnavas元素画一个五角星时，最难的应该是五角星角的坐标。这就是一个五角星的坐标定位
首先在Canvas元素中，y轴是向下为正。
由于五角星有五个角，圆为360度，所以角与角之间的距离应该为72度。
此时的五角星的十个点的坐标当成是在内外两个圆上排列。读过高中的同学都应该明白图中标示出来的四个点的坐标是怎样算出来的。由于Canvas元素中y轴向下为正，所以sin的值为负。
然后开始画五角星的顶点，用一个循环就可以：

function drawStar(cxt, R, r, x, y){
//ctx为传入的上下文环境，R为外面大圆的半径，r为内部小圆的半径，x为五角星中心的横坐标，y为五角星中心的纵坐标。
for(var i = 0; i < 5; i ++){
ctx.beginPath();
ctx.fillStyle = “yellow”;
ctx.lineTo( Math.cos((18+i*72)/180*Math.PI)*R+x,
-Math.sin((18+i*72)/180*Math.PI)*R+y
);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
-Math.sin((54+i*72)/180*Math.PI)*r+y
);
}
ctx.closePath();
ctx.fill();
}
由于Math.cos(),接受的是弧度值，所以我们需要将角度转换为弧度。即：
弧度值 = 角度/180*π；

切记：当我们要画一个封闭的图形时，beginPath(