利用HTML5的canvas制作万花筒动画特效

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style>
 5   #canvas{
 6            background-color:#cccccc;
 7
 8      }
 9 </style>
10 <script>
11 window.onload=function(){
12    var canvas=document.getElementById("canvas");
13    var cobj=canvas.getContext("2d");
14    // var num=150;
15     var arr=[];
16     //var angle=0;
17     setInterval(function(){
18     cobj.clearRect(0,0,600,600);
19          for(var i=0;i<arr.length;i++)
20          {
21
22             cobj.save();
23           cobj.translate(300,300);
24           cobj.scale(arr[i].scale,arr[i].scale);
25          cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置,后面更改了原点的位置只影响到后面的绘制,下面的矩形就是原点在(50,50)地方的,而旋转的圆心在(100,100)处
26          cobj.beginPath();
27          cobj.fillStyle=arr[i].color;
28          cobj.rect(arr[i].num,arr[i].num,30,30);
29          cobj.fill();
30         cobj.restore();
31          }
32
33
34 },60)
35     setInterval(function(){
36         for(var i=0;i<arr.length;i++)
37         {
38          if( arr[i].num<=0)
39           {
40              arr.splice(i,1);//删掉当前元素;
41              continue;//同时退出本次循环
42
43           }
44           //变化过程中的储存的设置很重要,如果变化的储存没有设置好则有可能会达不到效果
45           arr[i].angle+=2;
46           arr[i].num-=0.2;
47           arr[i].scale-=0.002;
48           if(arr[i].scale<=0.2)
49             arr[i].scale=0.2;
50         }
51
52     },60)
53    setInterval(function(){
54         var rect={angle:0,num:150,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"} ;
55         arr.push(rect);
56    },1000)
57
58    }
59    </script>
60 </head>
61 <body>
62 <canvas id="canvas" width=600px height=600px>
63 您的浏览器已经过期了!
64 </canvas>
65
66 </body>
67 </html>
时间: 2024-10-05 22:10:01

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

HTML5 Canvas水波纹动画特效

HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让人惊叹不已,这次分享的HTML5 Canvas水波纹动画同样非常震撼人心. 在线演示          源码下载 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&q

Html5用Canvas制作绘图板

需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该跟随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示相应的图形 思考: 第一想到的是找现成的改一改,找来找去,就觉得fabricjs还可以,不过研究了一下,发现例子太少,很难短时间内上手 想到了最近一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到很快就上手了 结果: 一天半时间完成,效果如下: 注意: 不要使用style或者cs

html5炫酷购物车结算动画特效

这是一款效果十分炫酷的html5购物车结算动画特效插件.该购物车结算动画提供了4种效果,每种效果都使用CSS3来制作炫酷的动画特效,这些效果使用户的购物结算体验大大的增强了. 在线演示:http://www.htmleaf.com/Demo/201501231255.html 下载地址 :http://www.htmleaf.com/html5/html5muban/201501231254.html

HTML5之按钮背景不同动画特效设计

前言 今天来继续给大家介绍一下HTML5,讲什么呢,讲讲一组效果非常酷的鼠标滑过按钮背景动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画background-size和background-position属性,来实现各种背景动画效果. 下面来看一下整体的效果图: 看了动画效果之后大家应该非常关心他是如何实现的,现在就给大家具体讲讲他的实现技巧. 具体实现 1. CSS样式 首先为按钮设置通用样式.将按钮的背景去除,设置2像素的实线边框,并将底部边框设置为4个像素.

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

HTML5标签canvas制作动画

摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停的转圆圈. 代码: 1 <canvas id="myCanvas" width="300" height="300"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var

HTML5标签canvas制作平面图

摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上.canvas标记由 Apple 在 Safari 1.3 Web 浏览器中引入.对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也

Html5用Canvas制作画图板

需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到的是找现成的改一改,找来找去,就认为fabricjs还能够,只是研究了一下,发现样例太少,非常难短时间内上手 想到了近期一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到非常快就上手了 结果: 一天半时间完毕,效果例如以下: 注意: 不要使用style

10种canvas鼠标光标动画特效

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