自己无意中的一个小“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. Javascript模块化编程之难处

    接着上一篇“Javascript模块化编程之Why”说起,Javascript担子重了之后程序也就复杂了.在大把语言都模块化编程的形势下,Javascript也不可能袖手旁观啊,毕竟这是一条经过实践检 ...

  2. 领域模型中分散的事务如何集中统一处理（C#解决方案）

    领域模型中分散的事务如何集中统一处理(C#解决方案)   开篇 什么是事务,事务的应用场景 做项目时,经常会遇到一些需求,比如注册用户时,要求同时存入用户的基本信息和初始化该用户的帐户,如果在这两个环 ...

  3. Xcode中如何集成Unity

    项目中需要集成unity,摸索了大半周,碰到了很多坑,终于搞定. 我的方法是,通过unity导出一个空的iOS项目,然后再新建一个Xcode项目,针对配置页面一一对应.直到配置完全一样,然后倒入相关资 ...

  4. iOS关于RunLoop和Timer

    RunLoop这个东西,其实我们一直在用,但一直没有很好地理解它,或者甚至没有知道它的存在.RunLoop可以说是每个线程都有的一个对象,是用来接受事件和分配任务的loop.永远不要手动创建一个run ...

  5. GEF-whole-upload教程中遇到的问题及解决方案

    最近在学习GEF开发,使用的是GEF-whole-upload这个教程.由于教程当时所使用的版本与本人使用的版本有一些差异,中间出现了不少问题,现在将解决方案分享给大家. 本人使用的Eclipse版本 ...

  6. 验证码生成组件--JCaptcha的使用

    以下为项目中所用代码,文笔有限,直接上代码. 所需jar包: 是否需要其他依赖包,不详 web.xml <servlet> <servlet-name>Jcaptcha< ...

  7. 使用Reactive Extensions（Rx），对短时间内多次发生的事件限流

    使用Reactive Extensions(Rx),对短时间内多次发生的事件限流 牛刀小试:使用Reactive Extensions(Rx),对短时间内多次发生的事件限流 我之前有一篇文章介绍到了R ...

  8. hdu4277 USACO ORZ

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  9. mybatis逆向工程生成代码

    1 什么是逆向工程 mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mapper.xml.po. ...

  10. KnockOut文档--模板绑定

    目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...