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

本文内容申明
内容针对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>

上述代码画出来的示意图是:

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

谢谢@volkia @颜海镜 给予的意见,试着修复了一下角度

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

Canvas画空心正五角星-扩展DEMO为五星红旗的更多相关文章

  1. canvas画箭头demo

    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  4. 使用canvas画三角形

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【Canvas】动态正17边光阑 向高斯致敬

    [背景知识] 公元前三世纪,欧几里得在<几何原本>中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破. 1796年,1 ...

  6. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  7. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  8. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  9. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

随机推荐

  1. redis 一些操作命令

    # 删除laravel keyredis-cli -h 10.9.103.15 -a password keys "laravel*" | xargs redis-cli -h 1 ...

  2. redis在游戏服务器中的使用初探(一) 环境搭建

    这里我们尝试在游戏服务器中的数据处理中使用redis 通过该系列文章能够学习 redis的基本操作 源码编译 客户端开源库的编译和使用 以及在游戏服务器中的缓存使用 作为初次摸索 尽量使得环境简单  ...

  3. Codeforces Round #486 (Div. 3) D. Points and Powers of Two

    Codeforces Round #486 (Div. 3) D. Points and Powers of Two 题目连接: http://codeforces.com/group/T0ITBvo ...

  4. The Python Challenge 0-4

    The Python Challenge 0-4 项目地址:http://www.pythonchallenge.com/ Level-0 提示Hint: try to change the URL ...

  5. 内置函数_zip()

    zip() zip()函数用来把多个可迭代对象中的元素压缩到一起,返回一个可迭代的zip对象,其中每个元素都是包含原来的多个可迭代对象对应位置上元素的元组,最终结果中包含的元素个数取决于所有参数序列或 ...

  6. Spring之AOP由浅入深

    1.AOP的作用 在OOP中,正是这种分散在各处且与对象核心功能无关的代码(横切代码)的存在,使得模块复用难度增加.AOP则将封装好的对象剖开,找出其中对多个对象产生影响的公共行为,并将其封装为一个可 ...

  7. Centos 执行top命令详细解读

    1.作用:top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式:top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数: d:指定更新的间隔,以 ...

  8. Javascript高级编程学习笔记(2)—— Script标签

    script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...

  9. 我自己的sublime3环境

    概述 我本来一直用的别人自带的破解版sublime3,自带插件. 前几天看<程序员修炼之道>,其中谈到了最好精通一种编辑器,我觉得说的很有道理,于是重新下了最新版的sublime3,一步步 ...

  10. c++中的.hpp文件

    http://blog.chinaunix.net/uid-24118190-id-75239.html hpp,其实质就是将.cpp的实现代码混入.h头文件当中,定义与实现都包含在同一文件,则该类的 ...