HTML5学习-绘制五角星

最新推荐文章于 2024-07-28 20:02:26 发布
最新推荐文章于 2024-07-28 20:02:26 发布
阅读量499 收藏 2
点赞数
文章标签： 开发工具
原文链接：http://www.cnblogs.com/NoteofEveryDay/p/4607754.html
版权

开发工具：IntelliJ IDEA

实现效果：如下

思路：五角星实际是五边形各个顶点与不相邻顶点的连线形成的。

        因此，根据五边形的边长，以及五边形的内角度数，可以求出各个顶点的坐标。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7 
 8         function drawOneStar(ctx,i)
 9         {
10             //i为五边形的边长
11             ctx.beginPath();
12             ctx.moveTo(0,i*Math.sin(Math.PI/5));//B点
13             ctx.lineTo(i*2*Math.cos(Math.PI/5) ,i*Math.sin(Math.PI/5));//BE
14             ctx.lineTo(i*Math.cos(Math.PI/5*2),(i*Math.sin(Math.PI/5*2))+i*Math.sin(Math.PI/5));//EC
15             ctx.lineTo(i*Math.cos(Math.PI/5),0);//CA
16             ctx.lineTo(i+i*Math.cos(Math.PI/5*2) ,(i*Math.sin(Math.PI/5*2))+i*Math.sin(Math.PI/5));//AD
17             ctx.lineTo(0,i*Math.sin(Math.PI/5));//DB
18             ctx.closePath();
19             ctx.fillStyle="red";
20             ctx.fill();
21         }
22         function drawStar()
23         {
24             var canvas=document.getElementById("canvas");
25             var ctx=canvas.getContext("2d");
26             ctx.shadowBlur=30;
27             ctx.shadowColor="red";
28             ctx.translate(300,600);
29             ctx.rotate(-Math.PI/8);
30             drawOneStar(ctx,50);
31             for(var i=0;i<50;i++)
32             {
33                 ctx.translate(70,-25);
34                 ctx.rotate(-Math.PI/8);
35                 ctx.scale(0.95,0.95);
36 
37                 drawOneStar(ctx,50);
38             }
39 
40         }
41 
42     </script>
43 </head>
44 <body marginwidth="0px" marginheight="0px" onload="drawStar()">
45 <canvas id="canvas" width="800px" height="800px" style="background-color:yellow"></canvas>
46 </body>
47 </html>
View Code

 

转载于:https://www.cnblogs.com/NoteofEveryDay/p/4607754.html

weixin_30544657
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5绘制随机五角星_HTML5 canvas绘制五角星的方法
weixin_30432831的博客
02-01 805
这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法，感兴趣的小伙伴们可以参考一下是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRender...
用html css实现五角星,用CSS画五角星
weixin_42442653的博客
06-16 1743
五角星#star-five {margin: 50px;position: relative;display: block;color: red;width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent...
使用HTML Canvas绘制五角星(一)
qq_35322029的博客
03-15 440
HTML Canvas绘制五角星 HTML Canvas绘制五角星思路整理
html绘制五角星坐标,科技常识：HTML5 canvas基本绘图之绘制五角星
weixin_42502345的博客
05-31 953
今天小编跟大家讲解下有关HTML5 canvas基本绘图之绘制五角星 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 canvas基本绘图之绘制五角星 的相关资料，希望小伙伴们看了有所帮助。是HTML5中新增的标签 用于绘制图形 实际上 这个标签和其他的标签一样 其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象 我们可以通过JavaScri...
canvas绘制不同样式的五角星（图文示例）
大剑师兰特的GIS世界
01-18 1472
如何使用canvas绘制不同样式的五角星呢？这里面要确定每个五角星围绕中心点的角度是72度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的五角星。
H5学习(一)——使用canvas绘制五角星
bruce_zhao1407的博客
02-16 1705
首先观察五角星的图形，可见五角星共有十个角，五个内角，五个外角，分别位于以五角星形心为圆心的两个大小同心圆上，如图所示 在此考察各个角的角度与坐标关系 由于五角星每个角都是72°，因此对于第一象限，用90°-72°可得∠a=18°， 根据角度关系可知∠b=54°，由此可以得到ABC三个点的坐标 注意，纵坐标轴方向朝下 A(cos18° * R，-sin18°R), B(cos54 * R，-s...
html css 画五角星,纯 CSS3 绘制图形（心形、五角星、六边形等）
weixin_39614831的博客
06-21 538
这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着CSS3的广泛使用，更多新奇的 CSS 作品涌现出来。Star (6-points)#star-six {width: 0;height: 0;border-left: 50...
python绘制五角星
Z_Silence的博客
01-13 1900
python绘制五角星 分享一个使用Python绘制的五角星小案例，欢迎留言探讨指正，大佬勿喷，抱拳 下面呈上小代码 代码： import turtle #导入turtle库包 turtle.fillcolor("red") #填充颜色 turtle.begin_fill() #开始画，类似起笔 count = 1 #计时器...
html做旋转的五角星,如何用几何画板制作旋转的五角星
weixin_35572715的博客
06-26 499
五角星是一个精美的图案，代表了天上的星星，就连我们国家的国旗，上面也是镶嵌的五角星。几何画板作为一款专业的绘图工具，不仅仅可以绘制一些简单的图形，也可以构造精美的图案。在前面的教程中我们学习了利用几何画板画五角星的方法，可是有人问了：怎样才能将五角星旋转起来呢？很简单，下面我们就一起来学习下是如何制作的。具体的操作步骤如下：步骤一 绘制五角星。画一个圆，并且在圆上另外任意取一点，分别标记为点O和点...
HTML5 canvas基本绘图之绘制五角星
09-27
以下是如何使用CanvasRenderingContext2D对象绘制五角星的示例代码： ```javascript // 获取canvas DOM对象 var canvas = document.getElementById("canvas"); // 获取2D渲染上下文 var context = canvas....
商业编程-源码-绘制一个五角星.zip
06-23
此外，学习如何绘制五角星这样的简单图形也是编程教育的基础练习，有助于初学者理解编程逻辑和图形渲染原理。 为了实现这个功能，开发者需要考虑一些关键点：颜色填充、旋转、缩放、以及与用户交互的可能性，比如...
HTML5五角星探照灯文字效果特效代码
03-20
五角星探照灯文字效果就是利用Canvas的drawPath()方法来绘制五角星的图形。五角星由两个等腰三角形组成，可以通过数学公式精确计算出每个顶点的位置，然后在Canvas上绘制出来。 在实现探照灯效果时，通常会结合CSS3...
HTML5 Canvas五角星变换特效特效代码
03-20
在Canvas上绘制五角星，我们需要定义一个星形的顶点坐标，然后使用`moveTo()`和`lineTo()`方法来描绘出星形的轮廓。五角星通常由两个交错的等边三角形构成，因此我们可以通过计算等边三角形的顶点来确定五角星的坐标...
html5 canvas五角星探照灯文字动画特效
06-11
我们将利用`beginPath()`、`moveTo()`、`lineTo()`等方法绘制五角星，`arc()`函数创建圆弧来模拟探照灯的效果，`fill()`或`stroke()`来填充或描边形状，`clearRect()`用于清除画布的一部分，以实现动态变化。...
mapsturct Cannot find implementation for xxxx问题
07-26 124
maven 编译 插件 未配置如下属性导致。2、本地debug ，提示问题 如标题。lombok 1.18 没问题。mapsturct 包引入没问题。
家政项目小程序的设计
2401_85476437的博客
07-26 424
管理员账户功能包括：系统首页，个人中心，用户管理，家政人员管理，家政服务管理，咨询信息管理，咨询服务管理，家政预约管理，留言板管理，系统管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。服务器：SpringBoot自带 apache tomcat。微信端账号功能包括：系统首页，家政服务，我的。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发工具：IDEA(推荐)开发系统：Windows。
PyTorch深度学习快速入门（上）
最新发布
wanchen_Gabby的博客
07-28 520
包含前言（PyTorch环境配置、Python编译器的选择、Python学习中的两大法宝函数）、如何加载数据（Dataset与Dataloader的作用、Dataset与Dataloader的常见组成形式与实战）、TensorBoard（作用、如何安装&打开事件文件的指令、两个运行时常见报错、add_scalar( ) 的使用、add_image( ) 的使用）、torchvision中的transforms（transforms的作用与使用技巧、其中常见方法的使用、与dataset的联合使用）
PyCharm 常用 的插件
u013934107的博客
07-27 160
PyCharm 常用 的插件
计算机图形学-OpenGL-绘制五角星
06-09
使用OpenGL绘制五角星可以通过以下步骤实现： 1. 创建OpenGL上下文和窗口。 2. 设置绘制区域和视口。 3. 设置绘制颜色和深度缓冲区。 4. 绘制五角星。可以使用OpenGL的绘制多边形功能来绘制五角星，也可以使用纹理映射来贴上五角星的图案。 5. 交换前后缓冲区，显示绘制结果。 以下是一个简单的OpenGL绘制五角星的示例代码： ``` #include <GL/glut.h> #include <math.h> void display() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glColor3f(1.0, 1.0, 0.0); // 设置绘制颜色为黄色 glBegin(GL_POLYGON); float pi = 3.1415926; float x, y; float r = 0.5; float angle = 72.0 / 180.0 * pi; for (int i = 0; i < 5; i++) { x = r * sin(i * angle); y = r * cos(i * angle); glVertex2f(x, y); x = r / 2.0 * sin((i * angle) + angle / 2.0); y = r / 2.0 * cos((i * angle) + angle / 2.0); glVertex2f(x, y); } glEnd(); glutSwapBuffers(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH); glutInitWindowSize(800, 600); glutInitWindowPosition(100, 100); glutCreateWindow("OpenGL Star"); glutDisplayFunc(display); glutMainLoop(); return 0; } ``` 该示例代码使用了OpenGL的基本绘图功能，通过绘制黄色五角星的多边形实现了绘制五角星的效果。五角星的顶点坐标可以通过计算得到，并通过循环来绘制五个顶点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值