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>