canvas 五角星之回顾【初中三角函数】

当程序中遇到三角函数的时候我是懵逼的，于是百度了“初中三角函数”，

忘了这几个公式的，自己打脸。

目的是通过Canvas画一个五角星，

突破口：只要能通过给定的两个外圈点的半径，和内圈点的半径，借助上面的公式计算出每个五角星点的坐标。

主要代码如下：

【300】指的是外圈的半径

【150】指的是内圈的半径

        var cvs = document.getElementById("canvas");var ctx = cvs.getContext("2d");ctx.lineWidth = 2;ctx.beginPath();for (var i = 0; i < 5; i++) {ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 300 + 400, -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + 400);ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 150 + 400, -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + 400);}ctx.closePath();ctx.strokeStyle ="red"ctx.stroke();        

封装成方法

        function draw_star5(ctx , r1 , r2 , x , y , rot){  // r1 大圆半径，r2小圆半径，圆心坐标x，圆心坐标y,rot旋转角度（可无） 顺时针
            ctx.beginPath();for (var i = 0; i < 5; i++) {ctx.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * r1 + x, -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * r1 + y);ctx.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r2 + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r2 + y);}        ctx.closePath();}

转载于:https://www.cnblogs.com/cench/p/5628519.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！