canvas效果案例:五角星

作者: 贝程学院_前端 | 来源:发表于2019-06-22 22:12 被阅读6次

    参悟参悟,绘制一个属于你的五角星吧,结合之前知识点,完全可以绘制出一个标准的五角星
    效果:


    image.png

    开始摩拳擦掌

    屡屡想法

    1. 五角星有几个角?
      五个角!
      错啦~
      十个角: 分为五个外角,五个内角

    2. 找准角的坐标,将每个角都连接起来,那么五角星就出来了

    我们可以先找外角(图上所示)

    1. 红色的线所呈现的夹角就是两个外角形成的夹角 360 / 5 = 72°
    2. 三点钟方向0 °~ 到外角起始角的度数 18 ° = 90° - 72 °
    3. 好滴,到这的话可以明白 从18° 开始 每加 72°就到下一个外角

    那么内角同理:
    黄色的结束角位于红色的夹角中间(角平分线上),那么它的角度就为36° ,然后黄色的起始角~黄色的结束角则为 54° = 36°+ 18°
    内角从54°开始,每加72°则会到下一个内角

    先来个内外圆

    ctx.beginPath();
    // 外圆
    ctx.arc(250, 250, 200, 0, 2 * Math.PI);
    // 内圆
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
    
    ctx.stroke();
    
    ctx.closePath();
    

    画星星的路径****

    ctx.beginPath();
    ctx.lineWidth = 4;
    
    // 绘制星星路径
    for (var i = 0; i < 5; i++) {
        ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 200 + 250, -Math.sin((18 + i * 72) / 180 * Math.PI) * 200 + 250);
        ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 100 + 250, -Math.sin((54 + i * 72) / 180 * Math.PI) * 100 + 250);
    }
    
    ctx.closePath();
    ctx.stroke();
    

    下面不重要:

    / 原点
    ctx.beginPath();
    ctx.arc(250, 250, 5, 0, 2 * Math.PI, false);
    ctx.fill();
    
    ctx.font = '16px bold';
    ctx.fillStyle = 'red';
    
    // 大圆的夹角两条边
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'red';
    ctx.moveTo(250, 250);
    // deg(度数) = 份 / 180 * Math.PI 
    // Math.cos(deg) 临边比斜边 : X轴
    // Math.sin(deg) 对边比斜边 : Y轴
    ctx.lineTo(Math.cos(18 / 180 * Math.PI) * 200 + 250, -Math.sin(18 / 180 * Math.PI) * 200 + 250);
    ctx.fillText('起始角', Math.cos(18 / 180 * Math.PI) * 200 + 250, -Math.sin(18 / 180 * Math.PI) * 200 + 250);
    ctx.moveTo(250, 250);
    ctx.lineTo(Math.cos(90 / 180 * Math.PI) * 200 + 250, -Math.sin(90 / 180 * Math.PI) * 200 + 250);
    ctx.fillText('结束角', Math.cos(90 / 180 * Math.PI) * 200 + 250, -Math.sin(90 / 180 * Math.PI) * 200 + 250);
    
    ctx.stroke();
    
    // 大圆的夹角
    ctx.beginPath();
    ctx.arc(250, 250, 20, -18 / 180 * Math.PI, -Math.PI / 2, true);
    ctx.fillText('72°', 260, 230);
    
    ctx.stroke();
    
    // 0° 到 -18°
    ctx.beginPath();
    ctx.arc(250, 250, 40, -18 / 180 * Math.PI, 0);
    ctx.fillText('18°', 300, 250);
    
    ctx.stroke();
    
    // 小圆
    ctx.beginPath();
    ctx.strokeStyle = 'orange';
    ctx.fillStyle = 'orange';
    
    // 小圆的角的两条边
    ctx.moveTo(250, 250);
    ctx.lineTo(Math.cos(54 / 180 * Math.PI) * 100 + 250, -Math.sin(54 / 180 * Math.PI) * 100 + 250);
    ctx.fillText('结束角', Math.cos(54 / 180 * Math.PI) * 100 + 250, -Math.sin(54 / 180 * Math.PI) * 100 + 250);
    
    ctx.moveTo(250, 250);
    ctx.lineTo(350, 250);
    ctx.fillText('起始角', 350, 250);
    
    ctx.stroke();
    
    // 小圆的角
    ctx.beginPath();
    ctx.arc(250, 250, 60, 0, -54 / 180 * Math.PI, true);
    ctx.fillText('54°', 300, 210);
    ctx.stroke();
    
    

    canvas-绘制矩形及弧形

    相关文章

      网友评论

        本文标题:canvas效果案例:五角星

        本文链接:https://www.haomeiwen.com/subject/nphbqctx.html