canvas笔记-画一个五角星（含算法）

算法如下：

上面的图是正三角形：

说下算法，关于上面那些x，y是怎么算出来的。

这里大圆的5个顶点，每个顶点占用的角度为360/5 = 72度，左边那个18度是通过90 - 72 = 18度。

大圆半径为R，所以

x为cos(18度) * R

y为-sin(18度) * R

这个负是因为坐标y，是因为向下为正。

其他角度通过加72度就可以了！

下面来看下那个54度是怎么算的！

72 * 2 - 90 = 54度，同样半径为r

x为cos(54度) * r

y为-sin(54度) * r

其他角度通过加72度就可以了！

如果要旋转角度，只要画点时，每个点加一个对应的角度即可！

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;drawStar(context, 150, 300, 400, 400, 0);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();}
</script></body>
</html>

程序运行截图如下：

这里有一个要注意的，就是cos里面要传弧度，下面是度和弧度转换的格式：

1弧度=180/pai 度

1度=pai/180 弧度

canvas笔记-画一个五角星（含算法）相关推荐

案例四、1.使用Canvas画一个五角星
在使用Cnavas元素画一个五角星时,最难的应该是五角星角的坐标. 首先在Canvas元素中,y轴是向下为正. 由于五角星有五个角,圆为360度,所以角与角之间的距离应该为72度. 此时的五角星的十个 ...
python turtle库画一个五角星【Python初学绘制五角星】
一.常用命令 import turtle #导入turtle库 import time #时间模块 turtle.forward() #向前移动 turtle.right() #顺时针旋转 turtl ...
五角星具有“胜利”的含义。被很多国家的军队作为军官（尤其是高级军官）的军衔标志使用。也常常运用在旗帜上。我们的国旗上就有五角星。请你也画一个五角星吧。
五角星具有"胜利"的含义.被很多国家的军队作为军官(尤其是高级军官)的军衔标志使用.也常常运用在旗帜上.我们的国旗上就有五角星.请你也画一个五角星吧. [输入] 无 [输出] * ...
无聊画一个五角星玩玩
无聊,画一个五角星玩玩 code https://github.com/char0xface/five_pointed_star EXE 链接:https://pan.baidu.com/s ...
python同切圆_画一组同切圆画一组同心圆画一个五角星画一个黄色实心五角星 turtle.up() turtle.goto(0,-100) turtle.down() ...
1.画一组同切圆 >>> import turtle >>> turtle.circle(10) >>> turtle.circle(15) &g ...
canvas 画点_css+canvas 随便画一个星空
今天躺在床上刷抖音的时候,看见了一个马克笔随便画星空的视频,很有意思. 先看效果: 开始需求分析: 1.渐变色的背景 2.画一颗树和一些草 3.水面的倒影 4.随便画点星星 5.画一颗流星 1.渐变色 ...
【Shader与ShaderToy 】画一个五角星
写在前面看了几篇关于用shadertoy画线与画点的文章之后,突然想自己做一个五角星的效果来练练手.但是想归想,动起手来还是充满了"坎坷".折腾了一个周末只是思路清晰,但代码却一 ...
c语言课程设计台球厅系统,c语言画图用c语言画一个五角星和一个两周期 – 手机爱问...
2013-11-23 怎么画出一个正五角星尺规作图: 1.画一条水平线,通过此线上的任意点做一个圆 2.将圆规的一腿放在圆与直线的其一交点上,通过上述圆的圆心画半圆,并与之交两点.连接这两点做垂直线 ...
python画一个五角星
用python 画一个可爱的五角星,这是效果. 参考代码: from turtle import *color('red','yellow')screensize(800, 600, "bl ...

canvas笔记-画一个五角星（含算法）

canvas笔记-画一个五角星（含算法）相关推荐

最新文章

热门文章