昔有石碣村七星聚义，今有Canvas八星聚义。动态效果是，八颗星以等速螺线慢慢向中心聚集，最后汇聚成一颗。

效果：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>八星聚义</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
        var canvas=document.getElementById('myCanvus');
        canvas.height=;
        canvas.width=;
        var context=canvas.getContext('2d');

        context.translate(,);// 原点移到中央

        ){
            setInterval(function(){ run(context); }, );
        }
};

;// 角度
;// 与圆心的举例

function run(context){
        context.clearRect(-,-,,);// 清除图案

        context.strokeStyle = "black";

        // 横轴
        context.beginPath();
        context.moveTo(-, );
        context.lineTo(,);
        context.stroke();
        context.closePath();

       // 纵轴
        context.beginPath();
        context.moveTo(, );
        context.lineTo(,-);
        context.stroke();
        context.closePath();

        // 大圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(,,,,*Math.PI,false);
        context.closePath();
        context.stroke();

        // 小圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(,,,,*Math.PI,false);
        context.closePath();
        context.stroke();

        ){
            delta+=;// 角度每次加十
            distance-=0.4;// 举例每次减去十

            ;i<;i++){
                context.save();

                context.rotate(getRad(i*));
                context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

                context.save();
                context.rotate(getRad(-i*));
                drawFiveStar(context,,,,getColor(i));
                context.restore();

                context.restore();
            }

        }else{
            distance=;
            delta=;

            context.save();
            context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

            drawFiveStar(context,,,,'black');

            context.restore();
        }
}

// 角度得到弧度
function getRad(degree){
        *Math.PI;
}

// 得到颜色
function getColor(index){
    ){
        return "red";
    }){
        return "navy";
    }){
        return "green";
    }){
        return "yellow";
    }){
        return "pink";
    }){
        return "orange";
    }){
        return "olive";
    }){
        return "rose";
    }
}

// 绘制五角星，多角星都可以由这个方法变化而来
function drawFiveStar(context,x,y,r,color){
    context.strokeStyle = color;
    context.fillStyle = color;

    context.translate(x,y);

    ;i<;i++){
        context.save();
        context.rotate(getRad(/*i));

        context.beginPath();
        context.moveTo(, -r);
        context.lineTo(-Math.tan(getRad())*r, );
        context.lineTo(Math.tan(getRad())*r,);
        context.lineTo(, -r);
        context.fill();
        context.stroke();
        context.closePath();
        context.restore();
    }
}

//-->
</script>

HTML5 Canvas 八星聚义动态效果的更多相关文章

  1. HTML5 Canvas 六角光阑动态效果

    光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...

  2. HTML5 Canvas 绘制澳大利亚国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. HTML5 Canvas 绘制新西兰国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  4. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  5. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  6. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】

    HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...

  7. HTML5 Canvas 绘制英国国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  8. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  9. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

随机推荐

  1. 快速排序（Quick Sort）及优化

    原理介绍 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成 ...

  2. 欧拉路&&欧拉回路 概念及其练习

    欧拉路: 如果给定无孤立结点图G,若存在一条路,经过图中每边一次且仅一次,这条路称为欧拉路: 如果给定无孤立结点图G,若存在一条回路,经过图中每边一次且仅一次,那么该回路称为欧拉回路. 存在欧拉回路的 ...

  3. 【bzoj1222】[HNOI2001]产品加工 背包dp

    题目描述 某加工厂有A.B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成.由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需的时间会不同,若同时由两台机器共同进行加工 ...

  4. BZOJ 4460 [Jsoi2013]广告计划 ——Bitset 后缀自动机

    发现n比较小,直接枚举答案,然后发现连续的一段是确定的,然后我们只需要判断每个位置是否有这个连续的一段就好了 发现起点不同,最后的位置可能会有差距,所以DP一下就好了 然后用0表示未折返,1表示从最下 ...

  5. linux系统——etc下的group 文件

    etc/group 文件 用户组的所有信息都存放在/etc/group文件中 将用户分组是Linux系统中对用户进行管理及控制访问权限的一种手段.每个用户都属于某个用户组:一个组中可以有多个用户,一个 ...

  6. 如何通过IP地址分辨公网、私网、内网、外网

    如何通过IP地址分辨公网.私网.内网.外网   内.外网是相对于防火墙而言的,在防火墙内部叫做内网,反之就是外网.   在一定程度上外网等同于公网,内网等同于私网.   地址为如下3个区域就是处于私网 ...

  7. 【03】react 之 创建component

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...

  8. Nginx + tomcat 实现简单集群（基于反向代理方式）

    一.安装 nginx 1. nginx依赖以下一些软件库,在安装之前请确保安装了这些软件库,它们包括:gcc,openssl,zlib,pcre(可通过rpm -q命令查询是否已安装) 可通过命令 r ...

  9. sql2008百万级数据排除重复信息

    --高性能排除重复select userid from table where userid in ( select userid from ( select userid, row_number() ...

  10. （一） Spring基础概述

    1.历史 第一阶段:xml配置 在Spring1.x时代,使用Spring开发满眼都是xml配置的Bean,随着项目的扩大,我们需要把xml配置文件分布放到不同配置文件中,需要频繁的在开发的类和配置文 ...