<!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. 用adb logcat抓取log

    实时打印的主要有:logcat main,logcat radio,logcat events,tcpdump,还有高通平台的还会有QXDM日志     状态信息的有:adb shell dmesg, ...

  2. C++中函数参数的扩展

    1,C++ 可以看成是一种更好的 C 语言,所以 C++ 会考虑 C 的欠缺部分,然后给  与一些补充和扩展,本节课讲述 C++ 对函数参数的非常重要的扩展: 2,函数参数的默认值: 1,C++ 中可 ...

  3. PY个欧拉筛

    大数据用 python? 速度感人 突然来了一发 python 欧拉筛,调了半天之后输入 1e7 过了几秒钟之后出解了,PY 果然神速 没学过 PY 的小同学可以当做 VB 的阅读程序,反正语言隔离都 ...

  4. FTP连接不上的解决方法

    1.注意内网IP和外网IP 2.检查ftp服务是否启动 (面板首页即可看到) 3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000是否放行 (如是腾讯云/阿里云等还需检查安全组 ...

  5. k3 cloud注册插件的时候提示，请选择一个有效的插件程序集

    插件类的访问类型需要是public类型的,由于你的插件类没有标记为public类型,所以注册的时候并没有发现有插件,就是下面的单据体没有加载出数据.标记public之后,下面会有你的插件,然后选择对应 ...

  6. HTML面试问题收集（1）

    1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScr ...

  7. python 调用dll 动态链接库 结构体参数及回调函数等示例

    结构体示例: 这里是 C 代码的部分,主要是结构体的声明和回调函数定义. // 新版本定义 typedef enum { DevCard, DevLocator, DevReader } DevTyp ...

  8. 基于Nginx+nginx-rtmp-module+ffmpeg搭建rtmp、hls流媒体服务器

    上篇文章是基于Red5与ffmpeg实现rtmp处理NVR或摄像头的监控视频处理方案,有兴趣的朋友可以查看. Nginx及nginx-rtmp-module安装 新建目录 mkdir /usr/loc ...

  9. 基于maven搭建hibernate运行环境

    准备案例需要的数据库表和测试数据 建表语句: create table DEPARTMENT ( DEPT_ID integer not null, DEPT_NAME ) not null, DEP ...

  10. C scanf 函数的其他使用注意点

    1.scanf 函数中没有精度控制,如: scanf("%5.2f", &a )是非法的,不能企图用此语句数据小数位2位的实数 2.scanf中要求给出变量地址,如给出变量 ...