一、绘制五角星

1.1页面结构

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>绘制五角星</title>
  7.         <style type="text/css">
  8.             canvas{
  9.                 background: #00113F;
  10.             }
  11.         </style>
  12.         <script type="text/javascript">
  13.             window.onload = function() {
  14.                 var canvas = document.getElementById('canvas');
  15.                 var context = canvas.getContext('2d');
  16.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <canvas id="canvas" width="500" height="500"></canvas>
  21.     </body>
  22. </html>

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

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

  • 由上图我们可以知道，五角星其实是由10个点连接起来的，而五角星外角的五个点是在一个大圆上，内角的五个点也是在一个小圆上，并且这两个圆的圆心是一样的。因此我们只要知道这两个圆的半径以及点的角度（角度等于360度/点的个数），即可绘制出这些点。
  • 由上面分析可知，我们只需要知道原点坐标，大圆的半径，小圆的半径，以及确定需要绘制的边数，即可绘制出一个多边形，在这里我们默认绘制五边形
  • 现在我们编写绘制多边形的函数，首先我们需要设置一些默认值
  1.   function drawStart(Object) {  
    　　/*设置一些默认值*/
  2.     Object = Object || {};
  3.     Object.x = Object.x; //多边形的x轴坐标
  4.     Object.y = Object.y; //多边形的y轴坐标
  5.     Object.radius1 = Object.radius1; //多边形外面大圆的半径
  6.     Object.radius2 = Object.radius2; //多边形内部小圆的半径
  7.     Object.angle = 360 / (Object.num * 2); //每个点所对应的角度
  8.     Object.num = Object.num || 5; //设置绘制几边形,默认为五边形
  9.     Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形
  10.     Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色
  11.     Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/
    }
  • 接下来我们需要确定五角星的所有点的坐标，并且把每个点的信息存放在对象里面，然后放在一个数组中
  1.     var arr = [];
  2.     for(var i = 0; i < Object.num * 2; i++) {
  3.         var oStar = {};
  4.         if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点
  5.             oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)
  6.             oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180);//y坐标：圆点纵坐标+半径*sin(弧度)
  7.         } else {
  8.             oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);
  9.             oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);
  10.         }
  11.         arr.push(oStar);
  12.     }
  • 再接下来我们把这些点利用直线连起来就可以绘制一个五角星了
  1.     /*开始绘制多边形*/
  2.     context.beginPath();
  3.     context.moveTo(arr[0].x, arr[0].y);
  4.     for(var i = 0; i < arr.length; i++) {
  5.         context.lineTo(arr[i].x, arr[i].y);
  6.     }
  7.     context.closePath(); //关闭路径可以使首尾节点连接起来
  8.     if(Object.drawType == 'fill') { //判断需不需要填充多边形
  9.         context.fillStyle = Object.fillStyle;
  10.         context.strokeStyle = Object.strokeStyle;
  11.         context.stroke();
  12.         context.fill();
  13.     } else if(Object.drawType == 'stroke') {
  14.         context.strokeStyle = Object.strokeStyle;
  15.         context.stroke();
  16.     }

二、让星星闪烁

2.1 canvas图形合成api

2.2设置多个星星的参数

  • 利用for语句循环遍历50次，每循环一次设置一个星星的参数，然后把这些参数放在一个数组中
  1.     var starArr = [];
  2.     for(var i = 0; i < 50; i++) {
  3.         var oStar2 = {
  4.             x: 30 + (canvas.width - 60) * Math.random(),
  5.             y: 30 + (canvas.height - 60) * Math.random(),
  6.             radius1: 10 + 5 * Math.random(),
  7.             radius2: 5,
  8.             angle1: 360 * Math.random(), //初始角度
  9.             changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
  10.         }
  11.         starArr.push(oStar2);
  12.     }
  • 让星星每60ms变换一次
  1.     setInterval(function() {
  2.         context.clearRect(0, 0, 500, 500);
  3.         for(var i = 0; i < starArr.length; i++) {
  4.             starArr[i].angle1 += starArr[i].changeAngle;
  5.             context.save(); //保存之前的绘图环境
  6.             context.beginPath();
  7.             context.translate(starArr[i].x, starArr[i].y);
  8.             context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放
  9.             context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));
  10.             context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));
  11.             drawStart({
  12.                 x: 0,
  13.                 y: 0,
  14.                 radius1: starArr[i].radius1,
  15.                 radius2: starArr[i].radius2,
  16.                 num: 5
  17.             });
  18.             context.restore();
  19.         }
  20.     }, 60)
  • 完整代码
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>绘制五角星</title>
  6.         <style type="text/css">
  7.             canvas {
  8.                 background: #00113F;
  9.             }
  10.         </style>
  11.         <script type="text/javascript">
  12.             window.onload = function() {
  13.                 var canvas = document.getElementById('canvas');
  14.                 var context = canvas.getContext('2d');
  15.  
  16.                 function drawStart(Object) {
  17.                     /*设置一些默认值*/
  18.                     Object = Object || {};
  19.                     Object.x = Object.x; //多边形的x轴坐标
  20.                     Object.y = Object.y; //多边形的y轴坐标
  21.                     Object.radius1 = Object.radius1; //多边形外面大圆的半径
  22.                     Object.radius2 = Object.radius2; //多边形内部小圆的半径
  23.                     Object.angle = 360 / (Object.num * 2);
  24.                     Object.num = Object.num || 5; //设置绘制几边形,默认为五边形
  25.                     Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形
  26.                     Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色
  27.                     Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/
  28.  
  29.                     var arr = [];
  30.                     for(var i = 0; i < Object.num * 2; i++) {
  31.                         var oStar = {};
  32.                         if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点
  33.                             oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)
  34.                             oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180); //y坐标：圆点纵坐标+半径*sin(弧度)
  35.                         } else {
  36.                             oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);
  37.                             oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);
  38.                         }
  39.                         arr.push(oStar);
  40.                     }
  41.  
  42.                     /*开始绘制多边形*/
  43.                     context.beginPath();
  44.                     context.moveTo(arr[0].x, arr[0].y);
  45.                     for(var i = 0; i < arr.length; i++) {
  46.                         context.lineTo(arr[i].x, arr[i].y);
  47.                     }
  48.                     context.closePath(); //关闭路径可以使首尾节点连接起来
  49.                     if(Object.drawType == 'fill') { //判断需不需要填充多边形
  50.                         context.fillStyle = Object.fillStyle;
  51.                         context.strokeStyle = Object.strokeStyle;
  52.                         context.stroke();
  53.                         context.fill();
  54.                     } else if(Object.drawType == 'stroke') {
  55.                         context.strokeStyle = Object.strokeStyle;
  56.                         context.stroke();
  57.                     }
  58.                 }
  59.  
  60.                 var starArr = [];
  61.                 for(var i = 0; i < 50; i++) {
  62.                     var oStar2 = {
  63.                         x: 30 + (canvas.width - 60) * Math.random(),
  64.                         y: 30 + (canvas.height - 60) * Math.random(),
  65.                         radius1: 10 + 5 * Math.random(),
  66.                         radius2: 5,
  67.                         angle1: 360 * Math.random(), //初始角度
  68.                         changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
  69.                     }
  70.                     starArr.push(oStar2);
  71.                 }
  72.  
  73.                 setInterval(function() {
  74.                     context.clearRect(0, 0, 500, 500);
  75.                     for(var i = 0; i < starArr.length; i++) {
  76.                         starArr[i].angle1 += starArr[i].changeAngle;
  77.                         context.save(); //保存之前的绘图环境
  78.                         context.beginPath();
  79.                         context.translate(starArr[i].x, starArr[i].y);
  80.                         context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放
  81.                         context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));
  82.                         context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));
  83.                         drawStart({
  84.                             x: 0,
  85.                             y: 0,
  86.                             radius1: starArr[i].radius1,
  87.                             radius2: starArr[i].radius2,
  88.                             num: 5
  89.                         });
  90.                         context.restore();
  91.                     }
  92.                 }, 60)
  93.  
  94.             }
  95.         </script>
  96.     </head>
  97.     <body>
  98.         <canvas id="canvas" width="500" height="500"></canvas>
  99.     </body>
  100. </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. JQuery之 serialize() 及serializeArray() 实例介绍

    这两个方法都是jq封装的,主要用于form表单. serialize(); 1.创建一个标准url编码显示的文本字符转: 2.操作的对象是表单元素结合的jq对象: serializeArray(); ...

  2. 自己开发轻量级ORM（二）

    上一篇简单的对轻量级ORM开发开了个头.这篇主要聊下ORM框架的设计思路. ORM本质上是对数据库操作的抽象.大体上我将其分为对数据结构的抽象和对执行方法的抽象. 我的ORM设计图: ORM框架需要完 ...

  3. asp.net core mvc权限控制：分配权限

    前面的文章介绍了如何进行权限控制,即访问控制器或者方法的时候,要求当前用户必须具备特定的权限,但是如何在程序中进行权限的分配呢?下面就介绍下如何利用Microsoft.AspNetCore.Ident ...

  4. 康复计划#1 再探后缀自动机&后缀树

    本篇口胡写给我自己这样的东西都忘光的残废选手 以及那些刚学SAM,看了其他的一些东西并且没有完全懵逼的人 (初学者还是先去看有图的教程吧,虽然我的口胡没那么好懂,但是我觉得一些细节还是讲清楚了的) 大 ...

  5. 小米wifi局域网下播放硬盘影片使用方法

    因为家里没开网,看视频都要缓存到手机上. 后来听说小米wifi可以做为一个局域网服务器来用,没忍住就买了一个. 但是下载app之后才发现被坑. 小米路由器需要登录帐号之后才可以使用,而且每次开启都要登 ...

  6. JavaScript null 和 undefined

    null null 表示一个变量被声明了,并被赋值为空 var lzh = null; console.log(lzh); // null console.log(typeof lzh); // ob ...

  7. jvm的内存空间分区

    在方法(代码块)中定义一个变量时,java就在栈中为这个变量分配JVM内存空间,当超过变量的作用域后,java会自动释放掉为该变量所分配的JVM内存空间:而在堆中分配的JVM内存由java虚拟机的自动 ...

  8. 【中文分词】结构化感知器SP

    结构化感知器(Structured Perceptron, SP)是由Collins [1]在EMNLP'02上提出来的,用于解决序列标注的问题:中文分词工具THULAC.LTP所采用的理论模型便是基 ...

  9. java中使用正则表达式匹配字符串

    在Java中使用正则表达式去匹配相应的字符串: String importFileRole = "(import)\\s*[a-zA-Z0-9_<>.]+\\;";// ...

  10. PAT---完美数列

    由于数值比较大,选用long型的 先用快速排序方法对数组进行排序,然后进行查找. 用一个问题是所要查找的数可能不在数组中,因此不能用现成的二叉查找法.试着对二叉查找法进行改进,单没调通. 在查找过程中 ...