怎么用HTML5制作万花筒,如何用html5写出万花筒效果？

效果图：

代码如下：

http://www.baiduyo.com

canvas{

background:#ccc;

}

window.οnlοad=function () {

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

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

var arr=[];

var t=setInterval(function () {

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

for (var i=0; i

cobj.save();

cobj.translate(300,300);

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

cobj.rotate(arr[i].angle*Math.PI/180);

cobj.fillStyle=arr[i].color;

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

cobj.restore();

}

},60)

setInterval(function () {

for (var i=0; i

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

arr.splice(i,1);

continue;

}

arr[i].angle+=2;

arr[i].num-=0.2;

arr[i].scales-=0.002;

if(arr[i].scales<=0.2){

arr[i].scales=0.2;

}

},60)

setInterval(function () {

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

arr.push(rect);

},1000)

}

怎么用HTML5制作万花筒,如何用html5写出万花筒效果？相关推荐

r语言 python 股票_python r语言股票!如何用python写出爬虫？
python计时器问题? import time print('按下回车开始,按下 Ctrl C 暂停/停止计时.') while True: input("") starttim ...
海豚php显示图片,PS制作有海豚从水中跃出的效果
这篇教程是向脚本之家的朋友介绍PS制作有海豚从水中跃出的效果方法,教程制作出来的效果很逼真,难度不是很大,推荐到脚本之家,喜欢的朋友一起来学习吧怎样才能使照片更有立体效果,或者是照片上的景物有跃出照 ...
html5 制作书架展示 PHP,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画：旋转风车
详细内容请点击在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
html5 制作商品显示介绍,HTML5+CSS3：3D展示商品信息示例
强化下perspective和transform:translatez的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3d元素,~说不定效果不错哈~ 效果图: 说明一 ...
HTML5制作斑马线表格,JavaScript实现的斑马线表格效果【隔行变色】
本文实例讲述了JavaScript实现的斑马线表格效果.分享给大家供大家参考,具体如下: 虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用J ...
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
弹出框口登录php代码,如何用JQuery写出登录弹出框
类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: $(document).ready(functio ...
如何用hover写出顺畅的动态效果
最近在做项目的时候遇到了一个问题,就是在用hover的时候当鼠标移出之后就没有了过渡效果 . 动态效果看起来很生硬,不顺畅. 如何解决呢? 直接上代码: html: <div class ...

怎么用HTML5制作万花筒,如何用html5写出万花筒效果？

怎么用HTML5制作万花筒,如何用html5写出万花筒效果？相关推荐

最新文章

热门文章