利用HTML5的canvas制作万花筒动画特效
<!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制作万花筒动画特效的更多相关文章
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- 使用Canvas制作时钟动画
复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...
- 用Canvas制作loading动画
上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...
- 利用CSS3实现div页面淡入动画特效
利用CSS3实现页面淡入动画特效 摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...
- HTML5标签canvas制作动画
摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...
- Html5用Canvas制作画图板
需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到 ...
- HTML5标签canvas制作平面图
摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...
- 10种canvas鼠标光标动画特效
来源:http://www.sucaihuo.com/js/1780.html demo:http://www.sucaihuo.com/jquery/17/1780/demo/
随机推荐
- 关于Win7图标丢失、不正常显示的修复方法
Windows7安装某些软件后,应用程序图标显示不正常,只会显示出是一个文件,无图标或图表显示错误.如果双击,也可以打开此应用程序.观察发现,一般从“管理”--“磁盘管理”中调整了磁盘盘符之后,容易出 ...
- WCF客户端关闭代码
Close不一定会成功,所以需要Abort. ChannelFactory channel = new ChannelFactory<IService1>("bindingN ...
- ZOJ2770 Burn the Linked Camp（差分约束系统）
区间和一定要联系到前缀和. 这题,把前缀和看作点,从s0到sn: 对于每一个营地i的容量capi,有这么个关系si-si-1<=capi: 对于每一个区间的评估i,j,k,有sj-si-1> ...
- 【壁纸自动换】自动下载、更换壁纸（Bing壁纸）--XinBSBingWallPaper[2.7更新]
XinBSBingWallPaper主要功能: 1.支持自动下载Bing壁纸.Netbian壁纸.美国国家地理杂志图片. 2.自动搜索.下载多国Bing首页壁纸. 3.支持定时自动更换桌面壁纸. 4. ...
- Activity 生命周期及其栈管理方式
Activity 生命周期 Android 系统用栈的形式管理 Activity , 当新的 Activity 被创建是, 会被放置到栈顶, 这个 Activity 会进入到运行状态, 而前一个 Ac ...
- winform学习-----理解小概念-20160517
1.MouseDown事件 当鼠标指针位于控件上并按下鼠标键时发生. 2.MouseUp事件 当鼠标指针在控件上并释放鼠标按键时发生. 与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才 ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-按钮设置
按钮设置是配置当前步骤的处理者可以执行哪些操作,每个按钮都有对应的执行脚本(javascript脚本). 从左边的按钮列表中选择当前步骤需要的按钮. 注意:如果是流程最后一步则要配置完成按钮而不是发送 ...
- oracle在线重定义表
在一个高可用系统中,如果需要改变一个表的定义是一件比较棘手的问题,尤其是对于7×24系统.Oracle提供的基本语法基本可以满足一般性修改,但是对于把普通堆表改为分区表,把索引组织表修改为堆表等操作就 ...
- 仿5173游戏交易平台系统SQL注入(可直接脱裤)+Getshell
最近没事登登好几年前玩过的游戏看看,发现有人喊高价收号,这一看就是骗子,这等骗子还想骗我?我就来看看这逗逼是怎么骗人的,结果发现这人给了一个说是 5173平台交易的网站,叫我直接把号的信息填上去然后填 ...
- POJ 2777 Count Color（线段树染色，二进制优化）
Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 42940 Accepted: 13011 Des ...