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

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

本文内容申明

内容针对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

时间: 2024-10-10 09:08:50

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

html5 canvas画五角星(美国队长)

画一波五角星: 美国队长图标 原理:  (1)根据五角星的顶点,外顶点5个,内顶点5个,分成内外圆 (2)由三角函数可表示出每个顶点的位置 (3)利用canvas的lineTo()接口画图 上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Captain America</tit

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

Android 用Canvas画textview、bitmap、矩形(裁剪)、椭圆、线、点、弧

初始化对象 private Paint mPaint;//画笔 private int count;//点击次数 private Rect rect;//矩形 public CounstomView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); //初始化画笔 mPaint = new Paint(); rect = new Rect(); setOnClickListe

10分钟,利用canvas画一个小的loading界面(顺便讨论下绘制效率问题)

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

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

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

【柿饼派GUI】Canvas画布控件使用(五)

本文介绍使用Canvas画布控件绘制: 画线 矩形 空心圆 实心圆 画图片 绘制文本 正文开始: 新建默认项目 >>新建page >>拖一个Canvas控件,设置 X = 0, Y = 0, Width = 480, Height = 272, 剩下的就交给js代码逻辑进行实现 var page = { /* 此方法在第一次显示窗体前发生 */ onLoad: function (event) { this.drawCanvas() }, drawCanvas: function

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

HTML5之Canvas画正方形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画正方形</title> <script type="text/javascript"> function drawFour(id) { //获取canvas元素 var canvas = document.getElementById("