<!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. javascript优化--03高质量编码

    使用Object的直接量实例构造轻量级的字典: 使用for/in循环,使用对象字面量来构建,并确保不增加Object.prototype属性来导致for/in循环:(考虑到兼容性,如Array.pro ...

  2. c#知识总结2

    四.C#类型转换 类型转换就是把一种类型转换成为另一种类型. 隐式类型转换:c#默认的以安全方式进行的转换.例如小整数类型转换为大整数类型.派生类转换为基类 显式类型转换:用户使用的预定义的函数显式完 ...

  3. Google不支持小于12px字体 终极办法

    每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员. 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸). 2.探索 2.1 CSS HAC ...

  4. Catching Fish[HDU1077]

    Catching Fish Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  5. Flexbox——快速布局神器

    Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...

  6. HDU 1312 (BFS搜索模板题)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1312 题目大意:问迷宫中有多少个点被访问. 解题思路: DFS肯定能水过去的.这里就拍了一下BFS. ...

  7. cocos2d 遍历CCAarray

    cocos2d 遍历CCAarray CCARRAY_FOREACH(children_, node){ }

  8. TYVJ P1032 零用钱 Label：贪心

    背景 USACO OCT09 7TH 描述 作為创造產奶纪录的回报,Farmer John决定开始每个星期给Bessie一点零花钱. FJ有一些硬币,一共有N (1 <= N <= 20) ...

  9. 十个JavaScript中易犯的小错误，你中了几枪？

    序言 在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有 ...

  10. ubuntu 14.04 https 形式安装docker 私有库 harbor

    起始目录/root,root 登陆后,直接在该目录进行下面的命令 下载harbor 预编译包 0.4.5 准备通过域名 reg.server.com 来访问镜像库所以需要在/etc/hosts 文件中 ...