<!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. servlet3.0文件上传与下载

    描述:文件上传与下载是在JavaEE中常见的功能,实现文件上传与下载的方式有多种,其中文件上传的方式有: (1)commons-fileupload: (2)Servlet 3.0 实现文件上传 (3 ...

  2. java学习day1

    一.常用的DOS命令 1.打开cmd 窗口键+r --> 输入cmd --> 确认 2.常用的dos命令 dir:列出当前目录下的所有文件及文件夹 md:创建一个新的目录 rd:删除目录 ...

  3. numpy数组的运算

    numpy数组的运算 数组的乘法 >>> import numpy as np >>> arr=np.array([[1,2,3],[4,5,6]]) >&g ...

  4. 【SSL2325】最小转弯问题

    题面: \[\Large\text{最小转弯问题}\] \[Time~Limit:1000MS~~Memory~Limit:65536K\] Description 给出一张地图,这张地图被分为 n× ...

  5. 34. Find First and Last Position of Element in Sorted Array （JAVA)

    Given an array of integers nums sorted in ascending order, find the starting and ending position of ...

  6. 可视化缺失值的办法——R语言

    在数据分析中,对缺失值的处理是很关键一步,一般用summary()函数 a<-c(,,,NA) B<-c("a","b","c" ...

  7. sklearn逻辑回归库函数直接拟合数据

    from sklearn import model_selection from sklearn.linear_model import LogisticRegression from sklearn ...

  8. 通过关键字Event定义用户自己的事件

    Event 语句 定义用户自定义的事件. 语法[Public] Event procedurename [(arglist)] Event 语句包含下面部分: 部分 描述 Public 可选的.指定该 ...

  9. Symbol的isConcatSpreadable方法

    Symbol.isConcatSpreadable 布尔值,对象用于Array.prototype.concat()时,是否可以展开 let arr1 = ['c', 'd']; ['a', 'b'] ...

  10. pymysql基本操作

    https://www.cnblogs.com/woider/p/5926744.html https://www.runoob.com/python3/python3-mysql.html 注意: ...