标签：
当程序中遇到三角函数的时候我是懵逼的，于是百度了“初中三角函数”，
忘了这几个公式的，自己打脸。
目的是通过Canvas画一个五角星，
突破口：只要能通过给定的两个外圈点的半径，和内圈点的半径，借助上面的公式计算出每个五角星点的坐标。
主要代码如下：
【300】指的是外圈的半径
【150】指的是内圈的半径
<canvas id="canvas" width="800" height="800"></canvas>
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(); }
标签：
原文地址：http://www.cnblogs.com/cench/p/5628519.html
