canvas万花筒案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#c{
background:#ccc;
}
</style>
</head>
<body>
<canvas id="c" width="600" height="600"></canvas>
</body>
</html>
<script>
var d=document.getElementById("c");
var c=d.getContext("2d");
var arr=[];
//创建方块
var t=setInterval(function(){
var rects={
augle:0,
start:150,
scale:1,
color:"rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")"
};
arr.push(rects);
},1000);
//放到画布上
var t2=setInterval(function(){
c.clearRect(0,0,600,600);
for(var i=0;i<arr.length;i++){
c.save();
c.translate(300,300);
c.rotate(arr[i].augle);
c.scale(arr[i].scale,arr[i].scale);
c.fillStyle=arr[i].color;
c.fillRect(arr[i].start,arr[i].start,30,30);
c.restore();
}
},10);
//方块的运动轨迹
var t3=setInterval(function(){
for(var i=0;i<arr.length;i++){
if(arr.length>=30){
arr.splice(i,1);
}
arr[i].augle+=0.02;
arr[i].scale-=0.002;
arr[i].start-=0.02;
}
},60)
</script>
canvas万花筒案例的更多相关文章
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
- canvas 时钟案例
<!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...
- Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- HTML5 Canvas 颜色填充学习
---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...
- HTML5 与 CSS3 jQuery部分知识总结
一. HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...
- HTML5 与 CSS3 jQuery部分知识总结【转】
一. HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...
- 赵雅智：android教学大纲
带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- word定义多级列表
1.单击开始选项卡里的多级列表按钮,在下拉列表中选择定义新的多级列表 2.先设置第一级编号,选择阿拉伯数字1,2,3,...,并在自动编号“1”的左右分别输入“第”“章”,级别链接到样式选择标题一 3 ...
- 学习C++的意义
1,常见的观点: 1,并不是每个应届生都有机会写操作系统和驱动程序: 2,嵌入式系统也是软家系统,只不过是软件在出厂的时候已经被烧写到硬件中了,用户没有办法修改软件而已,因此嵌入式系统也是软件系统,C ...
- [pwnable.kr] - wtf
Q: I don't understand why my exploit is not working. I need your help. download : http://pwnable.kr/ ...
- 「POI2010」反对称 Antisymmetry （manacher算法）
# 2452. 「POI2010」反对称 Antisymmetry [题目描述] 对于一个 $0/1$ 字符串,如果将这个字符串 $0$ 和 $1$ 取反后,再将整个串反过来和原串一样,就称作「反对称 ...
- 工作笔记之：如何在eclipse安装CVS插件？找了很久的，自己总结一下
(1)在主目录里“help”→Install New Software.....→The Eclipse Project Updates - http://download.eclipse.org/e ...
- Dire Wolf——HDU5115（区间DP）
题意 就是有一对狼,每个狼有初始的攻击力,并且还能给左右两边的狼提供攻击力加成,当冒险家杀死一头狼的时候他也会受到这个狼目前攻击力的伤害 实例解析 33 5 78 2 0 有三头狼,刚开始第二头狼给他 ...
- activemq高可用
这里是基于 zookeeper 选举方式实现的集群配置,服务器过半数才可提供服务,所以是2n+1台这里以三台为例. 只有master节点能提供服务,slave节点无法提供服务,只有当master节点挂 ...
- vue设置全局样式变量 less
1.第一步: npm install sass-resources-loader --save-dev 2.然后在build 的utils.js中exports.cssLoaders = functi ...
- spring controller 方法测试
controller 测试 不使用其他api接口测试工具 一般而言,我们写好一个模块后,会对其进行单元测试,再集成到现有的系统中. 但是呢~针对Controller.Service.Dao三层来说,我 ...
- tortoise svn回滚常用命令
一.revert to this version 和 revert changes from this version的区别 假设SVN已有版本4814-4854:1.基于4837版本执行[rever ...