canvas 纯 Js 实现五角星
效果如图–【最开始想法上走了弯路，计划取10个顶点的坐标值，然而坐标值获取没有规律，转变思路之后，迎刃而解】
思路：1.五角星实际上是 右侧特殊四边形围绕底部顶点的5次旋转；2.五角星是两个不同 radius 同心圆，被等分10份，交点形成顶点之后连线形成的。
解决方法： 找到特殊四边形的4个顶点坐标 moveTo lineTo fill 填充 ； for 循环5次，rotate 不同的角度就完成了；
用到的知识点：
坐标的算法：直角三角形斜边长度 z ，一个角度 Q。Q 对着的边长 = z *Math.sin(Q); Q 相邻的边长 = z*Math.cos(Q)；
对 canvas translate 和 rotate 的理解
一。 translate 移动的是原点，坐标；例如： ctx.translate(50,50) 那么 ctx.moveTo(0,0)–(0,0)，实际上在画布的 (50,50) 位置； translate 之后的处理，依然从(0,0)计算
二。rotate 旋转，是坐标轴的旋转；例如： ctx.rotate( -Math.PI/2 ) 就是整个坐标旋转了 -90 度
代码如下：
star("#f8db5a"); //设置不同的填充颜色
function star(fillColor){
let canvasStar = document.getElementById("star");
let star = canvasStar.getContext("2d");
let width = star.canvas.width;
let height = star.canvas.height;
// 五角星可以看做是两个同心圆。被平分10份，10个顶点的连接
let bigRadius = width / 2;
let smallRadius = width / 4;
let angle = Math.PI/5;
star.fillStyle = fillColor;
for(let j =0; j<5; j++){
drawStar(star,width,height,bigRadius,smallRadius,angle,j);
}
}
function drawStar(ctx,width,height,r1,r2,angle,j){
ctx.save();
ctx.translate(width/2, height/2);
ctx.rotate( -Math.PI/2 + j*2*angle);
//第一个图形。坐标轴旋转 -90.能直接得到两个顶点 (0,0)-(r1,0);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(r1,0);
// 绘制顶点
findAxisShort(angle,r2,ctx);
findAxisLong(angle,r1,ctx);
// 同心圆外侧大圆
function findAxisLong(angle,r1,ctx){
var longX = r1*Math.cos(angle*2);
var longY = r1*Math.sin(angle*2);
ctx.lineTo( longX, longY);
}
// 同心圆内侧小圆
function findAxisShort(angle,r2,ctx){
var shortX = r2*Math.cos(angle)
var shortY = r2*Math.sin(angle);
ctx.lineTo( shortX, shortY);
}
ctx.fill();
ctx.closePath();
ctx.restore();
}
html：
<canvas id="star" width="200" height="200"></canvas>
版权声明：本文为fchx91原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。