首页 > 代码库 > Canvas画空心正五角星-扩展DEMO为五星红旗

Canvas画空心正五角星-扩展DEMO为五星红旗

2024-07-25 03:53:59   216人阅读

<style></style>

马上就要国庆了，在这个举国欢庆的日子里面，让我来画一个五角星表表我的爱国之情，啊？那你不是要画一个五星红旗？是的，你猜对了，其实我的最初想法只是画一个空心的正五角星，为了满足你，我拼一拼。在这个过程中却发现了一些问题，数学你原来这么美，我在少年时期就爱上了你，只是在后来我累了，把你抛弃了，值得庆幸的是，我现在又回来了，而你还是给了我一次机会。（现实其实太美，我不敢看，以上情节纯属虚构，切勿模仿，珍惜眼前人）

本文内容申明
内容针对canvas方面做一个星级评级方面的demo前期，仅表述个人观点与君交流，内容不全面的方面，请查阅参考资料。点击此处鼓励一下unofficial
涉及知识
①：html5（canvas）
②：javascript
③：math（数学-图形与角度）
demo描述与扩展
demo:空心五角星
扩展demo1:星级评级 （代购真假指数：★☆☆☆☆）
扩展demo2:五星红旗
数学知识回顾为后期画图做铺垫
“下面有请我们学校最漂亮的数学老师为大家讲解一下今天我们要学习的数学知识”，“诶，算了，今天美女老师请假去耍十一小长假了，我来带你们一堂课。”，“切~~~”！
知识点1：什么是正五角星？
知识讲解：http://baike.baidu.com/view/424466.htm
知识点2：什么是弧度？
知识讲解：http://baike.baidu.com/view/84885.htm
“尼玛，这就讲完啦？自己看啊！”，“学习就是这样子的，你们只是缴了基础知识点的学费，没有缴详解的费用，需要详解请缴纳增值学费。”，“这太黑暗了，不就是老公不是首富了吗？太瞧不起人了，老子要去找马云！”。
如何画一个五角星

代码中涉及到的一些变量仅仅是方便我的后期使用，各位使用时可以忽略。


画的有些丑，但是还是可以看出是从一个点直接隔一个点到下一个点。等我上传一个勉强可以看的图。

路线图：A-C-E-B-D-A 
        <canvas id="star" width="650" height="150">您的浏览器不支持canvas！</canvas>        <script>            (function() { //draw star                var starEle = document.getElementById("star"),                    starNum = 5,        //数量                    padding_top = 25,    //上边距                    padding_left = 25,    //左边距                    space = 25,            //间距                    radius = 50,        //半径                    lineWidth = 2.0,    //边宽                    lineColor = "#FFF",    //边颜色                    drawStar = function() {                        var i,                            moveToX = radius + Math.cos(Math.PI / 10) * radius + padding_left,                            moveToY = radius - Math.sin(Math.PI / 10) * radius + padding_top,                            centerSpace = space + 2 * radius;                        for(i = 0; i<starNum; i++) {                            ctx.beginPath();                            ctx.moveTo(moveToX, moveToY);                            ctx.lineTo(radius + Math.cos(Math.PI * 9 / 10) * radius + padding_left + centerSpace * i, radius - Math.sin(Math.PI * 9 / 10) * radius + padding_top);                            ctx.lineTo(radius + Math.cos(Math.PI * 17 / 10) * radius + padding_left + centerSpace * i, radius - Math.sin(Math.PI * 17 / 10) * radius + padding_top);                            ctx.lineTo(radius + Math.cos(Math.PI * 5 / 10) * radius + padding_left + centerSpace * i, radius - Math.sin(Math.PI * 5 / 10) * radius + padding_top);                            ctx.lineTo(radius + Math.cos(Math.PI * 13 / 10) * radius + padding_left + centerSpace * i, radius - Math.sin(Math.PI * 13 / 10) * radius + padding_top);                            ctx.closePath();                            ctx.lineWidth = lineWidth;                            ctx.strokeStyle = lineColor;                            ctx.stroke();                            moveToX = moveToX + centerSpace;//下一个起点                        }                    },if(starEle.getContext) {                    var ctx = starEle.getContext(‘2d‘);                    drawStar();                }            }())        </script>
上述代码画出来的示意图是：

五角星现在已经画出来了，但是如何画出空心的五角星出来呢？
思路就是：从A出发沿着外边缘，“一步两步一步两步 一步一步似爪牙 似魔鬼的步伐 摩擦 摩擦 我给自己打着节拍 ”
        <canvas id="star" width="650" height="150">您的浏览器不支持canvas！</canvas>        <script>            (function() { //draw star                var starEle = document.getElementById("star"),                    starNum = 5,        //数量                    padding_top = 25,   //上边距                    padding_left = 25,  //左边距                    space = 25,         //间距                    bigRadius = 50,     //半径                    lineWidth = 2.0,    //边宽                    lineColor = "#FFF", //边颜色                    width = starEle.width,                    height = starEle.height,                    moveToX = bigRadius + Math.cos(Math.PI / 10) * bigRadius + padding_left,                    moveToY = bigRadius - Math.sin(Math.PI / 10) * bigRadius + padding_top,                    drawStar = function() {                        var i,                            j,                            radius,                            smallRadius = bigRadius * Math.sin(Math.PI / 10) / Math.cos(Math.PI / 5),                            centerSpace = space + 2 * bigRadius;                        for(i = 0; i < starNum; i++) {                            ctx.beginPath();                            ctx.moveTo(moveToX, moveToY);                            for(j = 1; j < 10; j++) {                                radius = j % 2 == 0 ? bigRadius : smallRadius;                                ctx.lineTo(bigRadius + Math.cos(Math.PI * (1 + 2 * j) / 10) * radius + padding_left + centerSpace * i, bigRadius - Math.sin(Math.PI * (1 + 2 * j) / 10) * radius + padding_top);                            }                            ctx.closePath();                            ctx.lineWidth = lineWidth;                            ctx.strokeStyle = lineColor;                            ctx.stroke();                            moveToX = moveToX + centerSpace;//下一个起点                        }                    };                if(starEle.getContext) {                    var ctx = starEle.getContext(‘2d‘);                    drawStar();                    //待续                    starEle.addEventListener("mousemove", function(e) {                        console.log("未完待续");                    }, false)                }            }())        </script>
上述代码画出来的示意图是：

祝愿来此一游的朋友国庆快乐！

面对国旗是庄严的，国旗比例尺寸参考的是（http://baike.baidu.com/view/9304.htm），最后再次面对国旗唱完国歌祝各位国庆节快乐，此时，我觉得我胸前的红领巾越发的红了。 本文原创博客地址：http://www.cnblogs.com/unofficial 官网地址： www.pushself.com

Canvas画空心正五角星-扩展DEMO为五星红旗


联系
我们