自己无意中的一个小“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. Effective C++(14) 在资源管理类中小心copying行为

    问题聚焦:     上一条款所告诉我们的智能指针,只适合与在堆中的资源,而并非所有资源都是在堆中的.     这时候,我们可能需要建立自己的资源管理类,那么建立自己的资源管理类时,需要注意什么呢?. ...

  2. Java、C#双语版HttpHelper类

    Java.C#双语版HttpHelper类(解决网页抓取乱码问题)   在做一些需要抓取网页的项目时,经常性的遇到乱码问题.最省事的做法是去需要抓取的网站看看具体是什么编码,然后采用正确的编码进行解码 ...

  3. generating permunation

    generating permunation——全排列(算法汇总) #include <iostream> #include <string> #include <vec ...

  4. 记一次有趣的互联网事件及console.log~

    寂寞的中国互联网又一次瘫痪了. 说是顶级域的根挂了,不知道是黑客还是某个实习生干挂的. 反正到现在还没有人来解释这件事. 先普及一下,为什么顶级域的根挂了全中国都挂了. 那是因为dns解析的特点是递归 ...

  5. C语言中数据类型的长度

    面试中C里面int长度经常会被问到,下面总结一下作为资料: 首先看看一般规定: 标准c规定,int长度等于机器字长,short的表示范围不能大于int的表示范围,long的表示范围不能小于int的表示 ...

  6. 【NET】Winform用户控件的初步封装之编辑控件

    编辑控件 public abstract partial class TEditorBase <TEntity, TRepository, TSqlStrConstruct> : User ...

  7. HDOJ 4607 - Park Visit

    用树形DP找到这颗树距离最远的两个点....对于一个询问K..若小于最远距离..显然只要走最远的这条边走K-1个边就行了.. 当K大于了最远距离..就要去走其他的点...而去其他点必须再回到这个主线. ...

  8. visio UML用例里面找不到include关系

    今天用Microsoft Visio 2007画用例图时,发现visio UML用例里面找不到include关系,查到一个可行的解决办法:  1)创建一个UML用例图模板:打开Microsoft Vi ...

  9. spring和redis的整合

    spring和redis的整合-超越昨天的自己系列(7) 超越昨天的自己系列(7) 扯淡:  最近一直在慢慢多学习各个组件,自己搭建出一些想法.是一个涉猎的过程,慢慢意识到知识是可以融汇贯通,举一反三 ...

  10. win32多线程-重写消息循环

    最近正在学习<win32多线程程序设计>,这是其中一段重写消息循环的代码事例,以后可能用的上. while (!quit || gNumPrinting > 0) { // Wait ...