一、绘制五角星

1.1页面结构

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>绘制五角星</title>

        <style type="text/css">

            canvas{

                background: #00113F;

            }

        </style>

        <script type="text/javascript">

            window.onload = function() {

                var canvas = document.getElementById('canvas');

                var context = canvas.getContext('2d');

            }

        </script>

    </head>

    <body>

        <canvas id="canvas" width="500" height="500"></canvas>

    </body>

</html>

1.2封装一个绘制多边形的函数

  • 在绘制之前首先我们需要画图分析一下，如何绘制一个多边形

  • 由上图我们可以知道，五角星其实是由10个点连接起来的，而五角星外角的五个点是在一个大圆上，内角的五个点也是在一个小圆上，并且这两个圆的圆心是一样的。因此我们只要知道这两个圆的半径以及点的角度（角度等于360度/点的个数），即可绘制出这些点。
  • 由上面分析可知，我们只需要知道原点坐标，大圆的半径，小圆的半径，以及确定需要绘制的边数，即可绘制出一个多边形，在这里我们默认绘制五边形
  • 现在我们编写绘制多边形的函数，首先我们需要设置一些默认值
  function drawStart(Object) {  
　　/*设置一些默认值*/

    Object = Object || {};

    Object.x = Object.x; //多边形的x轴坐标

    Object.y = Object.y; //多边形的y轴坐标

    Object.radius1 = Object.radius1; //多边形外面大圆的半径

    Object.radius2 = Object.radius2; //多边形内部小圆的半径

    Object.angle = 360 / (Object.num * 2); //每个点所对应的角度

    Object.num = Object.num || 5; //设置绘制几边形,默认为五边形

    Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形

    Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色

    Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/
}
  • 接下来我们需要确定五角星的所有点的坐标，并且把每个点的信息存放在对象里面，然后放在一个数组中
    var arr = [];

    for(var i = 0; i < Object.num * 2; i++) {

        var oStar = {};

        if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点

            oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)

            oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180);//y坐标：圆点纵坐标+半径*sin(弧度)

        } else {

            oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);

            oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);

        }

        arr.push(oStar);

    }
  • 再接下来我们把这些点利用直线连起来就可以绘制一个五角星了
    /*开始绘制多边形*/

    context.beginPath();

    context.moveTo(arr[0].x, arr[0].y);

    for(var i = 0; i < arr.length; i++) {

        context.lineTo(arr[i].x, arr[i].y);

    }

    context.closePath(); //关闭路径可以使首尾节点连接起来

    if(Object.drawType == 'fill') { //判断需不需要填充多边形

        context.fillStyle = Object.fillStyle;

        context.strokeStyle = Object.strokeStyle;

        context.stroke();

        context.fill();

    } else if(Object.drawType == 'stroke') {

        context.strokeStyle = Object.strokeStyle;

        context.stroke();

    }

二、让星星闪烁

2.1 canvas图形合成api

2.2设置多个星星的参数

  • 利用for语句循环遍历50次，每循环一次设置一个星星的参数，然后把这些参数放在一个数组中
    var starArr = [];

    for(var i = 0; i < 50; i++) {

        var oStar2 = {

            x: 30 + (canvas.width - 60) * Math.random(),

            y: 30 + (canvas.height - 60) * Math.random(),

            radius1: 10 + 5 * Math.random(),

            radius2: 5,

            angle1: 360 * Math.random(), //初始角度

            changeAngle: -5 + 10 * Math.random(), //每次旋转的角度

        }

        starArr.push(oStar2);

    }
  • 让星星每60ms变换一次
    setInterval(function() {

        context.clearRect(0, 0, 500, 500);

        for(var i = 0; i < starArr.length; i++) {

            starArr[i].angle1 += starArr[i].changeAngle;

            context.save(); //保存之前的绘图环境

            context.beginPath();

            context.translate(starArr[i].x, starArr[i].y);

            context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放

            context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));

            context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));

            drawStart({

                x: 0,

                y: 0,

                radius1: starArr[i].radius1,

                radius2: starArr[i].radius2,

                num: 5

            });

            context.restore();

        }

    }, 60)
  • 完整代码
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>绘制五角星</title>

        <style type="text/css">

            canvas {

                background: #00113F;

            }

        </style>

        <script type="text/javascript">

            window.onload = function() {

                var canvas = document.getElementById('canvas');

                var context = canvas.getContext('2d');

                function drawStart(Object) {

                    /*设置一些默认值*/

                    Object = Object || {};

                    Object.x = Object.x; //多边形的x轴坐标

                    Object.y = Object.y; //多边形的y轴坐标

                    Object.radius1 = Object.radius1; //多边形外面大圆的半径

                    Object.radius2 = Object.radius2; //多边形内部小圆的半径

                    Object.angle = 360 / (Object.num * 2);

                    Object.num = Object.num || 5; //设置绘制几边形,默认为五边形

                    Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形

                    Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色

                    Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/

                    var arr = [];

                    for(var i = 0; i < Object.num * 2; i++) {

                        var oStar = {};

                        if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点

                            oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)

                            oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180); //y坐标：圆点纵坐标+半径*sin(弧度)

                        } else {

                            oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);

                            oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);

                        }

                        arr.push(oStar);

                    }

                    /*开始绘制多边形*/

                    context.beginPath();

                    context.moveTo(arr[0].x, arr[0].y);

                    for(var i = 0; i < arr.length; i++) {

                        context.lineTo(arr[i].x, arr[i].y);

                    }

                    context.closePath(); //关闭路径可以使首尾节点连接起来

                    if(Object.drawType == 'fill') { //判断需不需要填充多边形

                        context.fillStyle = Object.fillStyle;

                        context.strokeStyle = Object.strokeStyle;

                        context.stroke();

                        context.fill();

                    } else if(Object.drawType == 'stroke') {

                        context.strokeStyle = Object.strokeStyle;

                        context.stroke();

                    }

                }

                var starArr = [];

                for(var i = 0; i < 50; i++) {

                    var oStar2 = {

                        x: 30 + (canvas.width - 60) * Math.random(),

                        y: 30 + (canvas.height - 60) * Math.random(),

                        radius1: 10 + 5 * Math.random(),

                        radius2: 5,

                        angle1: 360 * Math.random(), //初始角度

                        changeAngle: -5 + 10 * Math.random(), //每次旋转的角度

                    }

                    starArr.push(oStar2);

                }

                setInterval(function() {

                    context.clearRect(0, 0, 500, 500);

                    for(var i = 0; i < starArr.length; i++) {

                        starArr[i].angle1 += starArr[i].changeAngle;

                        context.save(); //保存之前的绘图环境

                        context.beginPath();

                        context.translate(starArr[i].x, starArr[i].y);

                        context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放

                        context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));

                        context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));

                        drawStart({

                            x: 0,

                            y: 0,

                            radius1: starArr[i].radius1,

                            radius2: starArr[i].radius2,

                            num: 5

                        });

                        context.restore();

                    }

                }, 60)

            }

        </script>

    </head>

    <body>

        <canvas id="canvas" width="500" height="500"></canvas>

    </body>

</html>
  • 效果演示

     点击预览demo

html5实例-闪烁的星星的更多相关文章

  1. 如何用PowerPoint制作闪烁的星星

    在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...

  2. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  3. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. Vijos P1881 闪烁的星星

    背景 星光闪耀--深蓝色空间 听说过他们的语言 沉默 暮 他们称赞深相互 描写叙述 繁星, 漫天的繁星. 繁星排成一列, 我数一数呀, 一共同拥有N仅仅小星星呢. 星星们是听话的好孩子, 小岛在指挥它 ...

  6. html5 实例渐变

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Vijos P1881 闪烁的星星 （加强自己多一点。。）

    假设每次查询不是整个长度,但[x, y]此时间间隔. . 闲来无事写的,感觉是正确的.这将成为合并范围. #include <cstdio> #include <cstring> ...

  8. HTML5应用——生日快乐动画之星星

    在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...

  9. 出售基于Html5的高性能GIS平台源码

    远景地理信息系统平台软件 远景地理信息系统平台软件,简称"RemoteGIS",版本V1.0,它是基于HTML5自主研发的新一代WEBGIS平台,它使用Javascript开发,具 ...

随机推荐

  1. Linux下JDK安装

    最近在学习linux,倒腾了半天.终于把jdk安装好了,写篇博客记录下来,关键是jdk环境变量的配置和保存了 我用的SecureCRT连接linux,然后再在SecureCRT上敲命令,关于Secur ...

  2. sqlcmd命令导入大容量的SQL本地文件至SQL server 2008

    由于开发工作在测试环境,需要构造测试数据,经常遇到100+M大小的*.sql文件需要导入到测试库的情况,由于SSMS里对导入文件的大小有限制: 会出现上图的报错!上网查了下,超过80M的文件是不能在S ...

  3. CoreImage-python截取核心图片

    去年项目中用到的图片截取,所以使用python写了一个,分享给大家,欢迎批评指正. github地址:https://github.com/george518/CoreImage 作用 核心图片:是指 ...

  4. Ionic start 创建项目报错 Error with start undefined

    转自:http://blog.csdn.net/wenzigui_qy/article/details/52874542 在Installing npm packages的时候报错,如下: Insta ...

  5. 手动加支付宝遇到的错误--iOS

    前言 之前调通了支付宝demo,开始往自己工程拖东西吧,我为什么觉得我可能把所以的问题都遇到了呢+_+,赶紧把问题记录下来 不然下次弄还费劲,加一句,要不真的用ping++吧

  6. Trick 小记

    1.\[P(A|BC) = \frac{P(AB|C)}{P(B|C)}\] 2. In EM algorithm, the usual expectation function can be wri ...

  7. php正则表达式（持续更新）

    1.字符串替换多个关键字 $pattern = array('/a/', '/a/', '/a/'); $replacement = array('x', 'y', 'z'); $subject = ...

  8. CSS3弹性盒模型新版和老版写法差异

    1.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型:flex:display : flex 老版弹性盒模型:box : disp ...

  9. TI(德州仪器) TMS320C674x逆向分析之一

    一.声明 作者并不懂嵌入式开发,整个逆向流程都是根据自身逆向经验,一步一步摸索出来,有什么错误请批评指正,或者有更好的方法请不吝赐教.个人写作水平有限,文中会尽量把过程写清楚,有问题或是写的不清楚的地 ...

  10. perl 之eval

    eval是个表达式,语句末尾有一个分号, 发现在它的监视范围内出现致命错误,会立即停止运行整个块,退出后继续运行其 余的代码   eval的返回值就是语句块最后一条表达式的执行结果   eval非正常 ...