<!DOCTYPE HTML>

 <html>

 <head>

 <style>

   #canvas{

            background-color:#cccccc;

      }

 </style>

 <script>

 window.onload=function(){

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

    var cobj=canvas.getContext("2d");

    // var num=150;

     var arr=[];

     //var angle=0;

     setInterval(function(){

     cobj.clearRect(0,0,600,600);

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

          {

             cobj.save();

           cobj.translate(300,300);

           cobj.scale(arr[i].scale,arr[i].scale);

          cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置，后面更改了原点的位置只影响到后面的绘制，下面的矩形就是原点在（50,50）地方的，而旋转的圆心在（100，100）处

          cobj.beginPath();

          cobj.fillStyle=arr[i].color;

          cobj.rect(arr[i].num,arr[i].num,30,30);

          cobj.fill();

         cobj.restore();

          }

 },60)

     setInterval(function(){

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

         {

          if( arr[i].num<=0)

           {

              arr.splice(i,1);//删掉当前元素；

              continue;//同时退出本次循环

           }

           //变化过程中的储存的设置很重要，如果变化的储存没有设置好则有可能会达不到效果

           arr[i].angle+=2;

           arr[i].num-=0.2;

           arr[i].scale-=0.002;

           if(arr[i].scale<=0.2)

             arr[i].scale=0.2;

         }

     },60)

    setInterval(function(){

         var rect={angle:0,num:150,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"} ;

         arr.push(rect);

    },1000)

    }

    </script>

 </head>

 <body>

 <canvas id="canvas" width=600px height=600px>

 您的浏览器已经过期了！

 </canvas>

 </body>

 </html>

利用HTML5的canvas制作万花筒动画特效的更多相关文章

  1. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  2. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  3. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

  4. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  5. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

  6. HTML5标签canvas制作动画

    摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...

  7. Html5用Canvas制作画图板

    需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到 ...

  8. HTML5标签canvas制作平面图

    摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...

  9. 10种canvas鼠标光标动画特效

    来源:http://www.sucaihuo.com/js/1780.html demo:http://www.sucaihuo.com/jquery/17/1780/demo/

随机推荐

  1. C# 中distinct的使用

    假设我们有一个类:Product public class Product { public string Id { get; set; } public string Name { get; set ...

  2. 模拟 POJ 2993 Emag eht htiw Em Pleh

    题目地址:http://poj.org/problem?id=2993 /* 题意:与POJ2996完全相反 模拟题 + 字符串处理:无算法,读入两行字符串找出相应点用used标记,输出时标记过的输出 ...

  3. 2015ACM/ICPC亚洲区长春站 H hdu 5534 Partial Tree

    Partial Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  4. BZOJ3831 : [Poi2014]Little Bird

    设f[i]表示到i最少休息次数,f[i]=min(f[j]+(h[j]<=a[i])),i-k<=j<i,单调队列优化DP #include<cstdio> #defin ...

  5. 20145325张梓靖 实验三 "敏捷开发与XP实践"

    20145325张梓靖 实验三 "敏捷开发与XP实践" 程序设计过程 实验内容 使用 git 上传代码 git上传中遇到的问题 使用 git 相互更改代码 实现代码的重构 git ...

  6. TYVJ P1012 火柴棒等式 Label：枚举

    背景 NOIP2008年提高组第二题 描述 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法 ...

  7. freemarker 直接使用List来遍历set集合,可能会报错

    转摘:http://www.javaweb1024.com/java/JavaWebzhongji/2015/04/08/528.html freemarker  直接使用List来遍历set集合,可 ...

  8. Solve Error Debug Assertion Failed Expression vector iterators incompatible Using PCL in Release Mode of VS2010

    When using PCL 1.4.0 in the release mode building under VS2010, we might sometime get the error &quo ...

  9. 编写一个名为Test的主类，类中只有一个主方法； 在主方法中定义一个大小为50的一维整型数组，数组名为x，数组中存放着{1， 3，5,…,99}输出这个数组中的所有元素，每输出十个换一行；在主方法中定义一 个大小为10*10的二维字符型数组，数组名为y，正反对角线上存的是‘*’，其余 位置存的是‘#’；输出这个数组中的所有元素。

    package liu0915; import java.util.Random; public class Test0915sz { public static void main(String[] ...

  10. android之listview

    首先建立res/layout/data_list.xml: 代码如下: <?xml version="1.0" encoding="utf-8"?> ...