算法如下： 上面的图是正三角形： 说下算法，关于上面那些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度就可以了！ 如果要旋转角度，只要画点时，每个点加一个对应的角度即可！ 下面是代码： 程序运行截图如下： 这里有一个要注意的，就是cos里面要传弧度，下面是度和弧度转换的格式： 1弧度=180/pai 度 1度=pai/180 弧度
<!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>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
9134