自己无意中的一个小“bug”，却让动画变得超绚丽= =

所以，不要害怕出bug，谁知道bug不会开出一朵绚丽的花呢？

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

         body{

                text-align: center;

            }

            canvas{

                border:1px dashed green;

            }

        </style>

    </head>

    <body>

         <canvas id="cvs" width="800" height="600"></canvas>

    <script>

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

        var context=cvs.getContext("2d");

        /*超绚丽的旋转*/

        var agle=0;

        context.translate(cvs.width/2-50,cvs.height/2-50)

        setInterval(function () {

            //擦除画布，（因为坐标轴旋转的原因，没有擦完全）

            context.clearRect(-800,-600,800,600);

            context.rotate(agle);

            context.strokeRect(0,0,100,100);

            agle+=0.01;

        },30)

    </script>

    </body>

</html>

使用canvas实现超绚丽的旋转正方形的更多相关文章

  1. canvas线条实践之运动的正方形

    原理说明: 1.通过rect实现正方形的绘制: 2.save保存canvas面板的保存,restore回复保存的canvas面板到初始状态: 3.translate用于改变canvas坐标的起始位置: ...

  2. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  3. css3-rotate实现超炫环形旋转特效

    css3-rotate实现超炫环形旋转特效,css3特效,环形旋转,圆形旋转,css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码. http://ww ...

  4. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

  5. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  6. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  7. 3D HTML5 Logo标志 超炫酷旋转特效

    今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...

  8. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  9. 关于canvas绘制大转盘并旋转

    O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果.现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~大转盘整个思路: 绘制整个转盘 编写一个随机数,用来当接口 ...

随机推荐

  1. uva 10054 The Necklace（欧拉回路）

    The Necklace  My little sister had a beautiful necklace made of colorful beads. Two successive beads ...

  2. oracle实例,数据库,服务器区别

    实例(instance) 实例是一个非固定的,基于内存的基本进程与内存结构.当服务器关闭时,实例就不存在了. 数据库(DataBase) 数据库指固定的,基于磁盘的数据文件,控制文件,日志文件,参数文 ...

  3. 流媒体：V4L2视频获取

    从深圳回来已经20多天了,除了完善毕业设计程序和论文,其他时间都去玩游戏了.真的是最后的一段时间能够无忧无虑在校园里挥霍自己的青春了.今天完成的答辩,比想象的要简单,一直以来想把我现在的这个流媒体的东 ...

  4. map,set的模板[STL]

    之前写某题单词查找的时候,有用到set,晚上写codeforces#497 div2 D题有用到map 感觉set,map的功能挺类似的,在此小结: 这里就不具体比较相同点和不同点了,免得看起来乱七八 ...

  5. Oracle常用语句记录

    交集/差集/合集 select * from tb_a intersect minus union all select * from tb_b 条件分支 decode() 例如:搜索条件没有手机就查 ...

  6. SOCKET网络编程细节问题1

    SOCKET网络编程快速上手(二)——细节问题(1) 三.细节问题一个也不能少 Socket编程说简单也简单,程序很容易就能跑起来,说麻烦还真是麻烦,程序动不动就出问题.记得刚开始写网络代码的时候,那 ...

  7. EF Code First、DbContext

    EF Code First.DbContext 对于之前一直使用webForm服务器控件.手写ado.net操作数据库的同学,突然来了EF和MVC,好多新概念一下泉涌而出,犹如当头一棒,的确有点不知所 ...

  8. java用正则表达式获取domain

    在工作中经常用到获取url的来源和域名的黑白名单功能.前段时间写了一个获取url中域名的方法.但是在测试过程中发现有些小问题. /** * 根据URL获取domain * @param url * @ ...

  9. 不想作死系列--win7远程linux桌面之vncserver

    1.在linux服务器上安装vncserver yum install vncserver 或者下载相应linux版本的tigervnc-serverrpm rpm -ivh tigervnc-ser ...

  10. linux下面安装配置mongoDB

    不知道为什么官网最新的2.4我一直解压失败 下载之前确认一下你的操作系统是64位的还是32位的对应去下载 64位链接:http://fastdl.mongodb.org/linux/mongodb-l ...