自己无意中的一个小“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. Jetbrains 系列神器

    PRODUCTS IntelliJ IDEA ReSharper WebStorm PhpStorm PyCharm RubyMine AppCode YouTrack TeamCity dotTra ...

  2. 图解 ENGLISH

    人在江湖,总得会几门手艺,英语必不可缺,下面几张图诠释了什么叫强大:

  3. Apache指南：CGI动态页面

    概要 相关模块 相关指令 mod_alias mod_cgi AddHandler Options ScriptAlias CGI(公共网关接口[Common Gateway Interface])定 ...

  4. Stimulsoft.Report.net报表简单实用

    1 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System. ...

  5. IOS学习之路九（配置restful webservice 框架restkit）

    RestKit 是一个开源的 objective-c 框架,容许在 iOS 和 Mac OS X 的 Objective-C 中与 RESTful Web 办事进行交互,包含简单的 HTTP requ ...

  6. socket网络编程快速上手（二）——细节问题（3）

    3.SIGPIPE问题 人怕牺牲,我们写的程序也一样,人有死不瞑目,程序又何尝不是?程序跑着跑着,突然就崩掉了.好一点的牺牲前告诉你些打印,差点的也能用core文件等一些手段查出死在哪了,最惨不忍睹的 ...

  7. springMVC3学习(十一)--文件上传CommonsMultipartFile

    使用springMVC提供的CommonsMultipartFile类进行读取文件 需要用到上传文件的两个jar包 commons-logging.jar.commons-io-xxx.jar 1.在 ...

  8. 寻找两个已序数组中的第k大元素

    寻找两个已序数组中的第k大元素 1.问题描述 给定两个数组与,其大小分别为.,假定它们都是已按照增序排序的数组,我们用尽可能快的方法去求两个数组合并后第大的元素,其中,.例如,对于数组,.我们记第大的 ...

  9. 【Linux】Shell学习笔记之四——文件和目录管理（硬连接和软连接）

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...

  10. cocos2d-x场景切换与过渡效果

    场景切换 void  MyScene::daySceneCallback(CCObject *pSender) {     CCScene *scene =  new  MyScene();      ...