<!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万花筒案例的更多相关文章

  1. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  2. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  3. canvas 时钟案例

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  4. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  5. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  6. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  7. HTML5 与 CSS3 jQuery部分知识总结【转】

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  8. 赵雅智：android教学大纲

    带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...

  9. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

  1. 剑指Offer编程题（Java实现）——链表中环的入口结点

    题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 思路一 迭代遍历链表,利用HashSet将每个结点添加到哈希表中,如果添加失败(重复遍历了这个结点即遇到环),输出 ...

  2. 极*Java速成教程 - (5)

    Java语言基础 容器 这个世界是有序的,将Java对象零散地放到内存中是不符合世界常理的,特别是有一大组相似的甚至不知道有多少数据的时候.把Java对象装进盒子里可以有序收纳,这个盒子就叫容器. 初 ...

  3. IDEA导入Junit jar包，在JavaSE的Module中使用Junit测试

    写代码时偶尔想试一下自己的小想法,于是在IDEA中建了一个JavaEE项目.JavaEE项目中只能在main方法中运行代码块,不如单元测试的@Test灵活. 于是在网上找到了Junit的jar包:Do ...

  4. 模板 - 无旋Treap

    一般而言作为一棵平衡树只需要插入,删除,值求排名,排名求值,前驱,后继,六个接口. #include<bits/stdc++.h> using namespace std; typedef ...

  5. 使用 ref 和 out 传递数组注意事项

    1.与所有的 out参数一样,在使用数组类型的 out 参数前必须先为其赋值,即必须由被调用方为其赋值 示例 :在此例中,在调用方(Main 方法)中声明数组 theArray,并在 FillArra ...

  6. IDEA 增加对JPA的支持 执行JPQL语句

    IDEA 可以在控制台console中执行JPQL语句: 1. 在已存在的项目中选择项目结构: 2. 选择模块-指定实体所在的模块-选择上面的号 2. 选择要添加的模块:我们使用的是JPA,也可能有的 ...

  7. 第7天：Django模板使用与表单

    模板的配置 作为web框架,Django提供了模板,用于编写html代码,模板的设计实现了业务逻辑view与现实内容template的解耦.模板包含两部分: 静态部分: 包含html.css.js 动 ...

  8. div和span互换

    div是块级元素,它不论大小默认占一行,而且可以设置宽高以及外边距span是行内元素,它占它自身大小的位置,而且不能设置宽高以及边距同时div也可以变为span (display:inline),这样 ...

  9. 解决stanfordnlp一直运行不报错也没有结果

    最近学习stanfordnlp,当运行程序时,发现程序一直没有反应,上网查询说是内存不够,但是本地电脑是8g内存.后来重新下载了所需文件,问题解决.

  10. BloomFilter&python支持

    BloomFilter&python支持 BloomFilter 布隆过滤器是一种概率空间高效的数据结构.它与hashmap非常相似,用于检索一个元素是否在一个集合中.它在检索元素是否存在时, ...