HTML Canvas 绘制五角星 （坐标滚动法）

最新推荐文章于 2022-11-04 09:06:29 发布
最新推荐文章于 2022-11-04 09:06:29 发布
阅读量3k 收藏 2
点赞数
分类专栏： H5 javascript 前端 文章标签： canvas javascript html5 五角星 画布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/write6/article/details/78877699
版权
H5 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
javascript
1 篇文章 0 订阅
订阅专栏
前端
1 篇文章 0 订阅
订阅专栏

H5 五角星 canvas

问题分析：五角星有5个角，10条边；“坐标滚动法的”核心思想是，在画布上以任意一点作为绘画起点依次绘制五角星的10条边（相邻两条边首尾相接），可以想象成用一支画笔在纸上沿着五角星形状以顺时针方向描边，依次刻画出五角星的外围轮廓，当画笔再次回到起点时，五角星绘制完成。

**方法特点：**不需要计算五个顶点的坐标，只需要改变边长即可控制五角星的大小

五角星 HTML5

=> HTML5 + CSS3 课件下载

子澈课堂
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制五角星
xm2by的博客
02-18 5154
canvas绘制五角星 在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示： 这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。 当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为...
html绘制五角星坐标,科技常识：HTML5 canvas基本绘图之绘制五角星
weixin_42502345的博客
05-31 952
今天小编跟大家讲解下有关HTML5 canvas基本绘图之绘制五角星 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 canvas基本绘图之绘制五角星 的相关资料，希望小伙伴们看了有所帮助。是HTML5中新增的标签 用于绘制图形 实际上 这个标签和其他的标签一样 其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象 我们可以通过JavaScri...
html 画星星的坐标,HTML Canvas 绘制五角星
weixin_39884373的博客
05-30 621
效果如图所示： 代码如下：var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext('2d');context.fillStyle = 'rgb(255,0,0)';context.lineWidth = 5;context.strokeRect(0,0,1000,1000);//绘图的...
OpenCV-Python实战(4) —— OpenCV 五角星各点在坐标系上面的坐标计算(以重心为原点)
最新发布
止于至善
11-04 2542
注意： AO⊥BE！假设 OA = r!
★五角星坐标★
水木日月珠
11-30 6751
备注一下五角星坐标： ================================================================= a=10; X=[a+a*sin(deg2rad(18)) 0; a*cos(deg2rad(36)) -a*cos(deg2rad(36))*cot(deg2rad(18))+a*cos(deg2rad(18)); -a*cos(de
js+canvas绘制五角星的方法
10-22
<title>canvas绘制五角星 canvas { border: 1px solid black; } <canvas id="canvas"></canvas> <script src="script.js"></script> </html> ``` 然后，我们需要在`script.js`中编写JavaScript代码来...
HTML5 canvas基本绘图之绘制五角星
09-27
以下是如何使用CanvasRenderingContext2D对象绘制五角星的示例代码： ```javascript // 获取canvas DOM对象 var canvas = document.getElementById("canvas"); // 获取2D渲染上下文 var context = canvas....
js+canvas绘制五角星的方法.docx
01-19
js+canvas 绘制五角星的方法 js+canvas 绘制五角星的方法主要介绍了使用 JavaScript 调用 canvas 组件结合数学运算绘制图形的相关技巧。下面将详细介绍该方法的实现步骤和相关概念。 JavaScript 和 Canvas 组件 ...
HTML5 Canvas五角星变换特效特效代码
03-20
在Canvas上绘制五角星，我们需要定义一个星形的顶点坐标，然后使用`moveTo()`和`lineTo()`方法来描绘出星形的轮廓。五角星通常由两个交错的等边三角形构成，因此我们可以通过计算等边三角形的顶点来确定五角星的坐标...
使用canvas画线，位移，旋转，绘制五角星。
09-29
现在我们来探讨如何绘制五角星。五角星的特性是每两条相邻的边相交于一个点，每个内角为72度，外角为144度。由于Canvas提供了旋转功能，我们可以先画出一条直线，然后围绕其端点旋转特定角度再画第二条线，依此类推...
五角星-立体
05-18
本程序通过DXUT框架利用线条输出立体五角星图形，本程序使用的是VS2010开发平台搭建Direct9.0环境，使用本程序代码需要安装Direct9.0，并且正确配置DirectX。本程序是在平面五角星程序基础上改编而成，并添加了定点索引。
html5-canvas绘图功能绘制五角星
candy755的博客
09-12 9787
我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 &lt;canvas&gt; 标记。 现在我将利用这...
canvas 绘制五角星
Lucky Star的博客
12-18 4902
分析：五角星有十个定点，五个外顶点，五个内顶点，可以看成顶点分别在两个圆上，其中假设外顶点所在圆的半径为R，内顶点所在圆的半径为r，画图分析可以知道每个顶点在坐标中的位置，其中方法drawStar(cxt,r,R,x,y)五个参数分别表示画布、小圆半径、大圆半径、五角星x轴偏移量、y轴偏移量。 绘制五角星 window.onload=function()
H5学习(一)——使用canvas绘制五角星
bruce_zhao1407的博客
02-16 1705
首先观察五角星的图形，可见五角星共有十个角，五个内角，五个外角，分别位于以五角星形心为圆心的两个大小同心圆上，如图所示 在此考察各个角的角度与坐标关系 由于五角星每个角都是72°，因此对于第一象限，用90°-72°可得∠a=18°， 根据角度关系可知∠b=54°，由此可以得到ABC三个点的坐标 注意，纵坐标轴方向朝下 A(cos18° * R，-sin18°R), B(cos54 * R，-s...
canvas绘图详解-06-绘制一个五角星-常用绘图原理
weixin_33949359的博客
02-07 562
先讲如何画一个正规的五角星 在五角星的内外画两个圆，五角星有五个角，360/5=72度 所以得出这两个角的度数 然后算出这两个点坐标 角度转弧度 角度/180*Math.PI 所以外顶点坐标 x: Math.cos( (18+72*i)/180*Math.PI) * R y:Math.sin((...
java 五角星十个坐标_五角星十个点坐标计算
weixin_27027459的博客
03-07 3760
CAD计算面积,提示点的Z坐标不同.必须把你所求面积各角点的X、Y、Z坐标中的Z坐标全部调整成0或者至少要调整到同一个数(即在同一个高度面上).xy不变,只调整Z即可(相同即可).已知两点坐标和第三点与两点的距离,怎么计算第三点坐标假设第三那点坐标为(x,y),先求出已知两点坐标的直线方程,再根据点到线的距离算出第三点坐标点到直线距离公式可以不代坐标计算?直线L1有用吗.过(0,2)作L2垂线使垂...
DX_五角星计算
qq_42716155的博客
03-22 8028
基础知识： 正五角星的角尖是36度，拐度是108度。 分析： 可以把五角星分成五个相同的等腰直接三角和一个正五边形，如图片。 多边形内角和计算公式：（n － 2）×180°(n大于等于3且n为整数）。 根据公式，可以算出五边形内角和为（5-2）×180°=540°，所以五边形每个角的度数为：540°÷5=108°。 已知正五边形每个角都是108° ，则等腰直角三角形的下面的两个相等的角为72°。 ...
canva五角星空html,使用canvas绘制一个五角星
weixin_36259655的博客
06-25 1027
一、了解canvascanvas 是HTML5新增的元素，用于在网页上绘制图形。但 canvas 只是图形的容器，必须要通过脚本(通常是JavaScript)来绘制图形。可以通过多种方法使用canvas标签来绘制路径、盒、圆、字符及添加图像等。 与 标签间插入的内容是供不支持 canvas 元素的浏览器显示的，可以用来做兼容，例如：您的浏览器暂时不支持canvas，请升级或更换您的浏览器！复制代码...
五角星五个顶点的位置？
热门推荐
独爱糕
10-19 2万+
Point point1(100,0),point2(195,69),point3(159,181),point4(41,181),point5(5,69); 按1，3，5，2，4排列就是五角星的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值