自己无意中的一个小“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. Class Model of Quick Time Plugin

    Quick Time Plugin 的类图. pdf version: http://pan.baidu.com/s/1o6oFV8Q

  2. [转] iOS ABI Function Call Guide

    source: apple ARMv6 Function Calling Conventions When functions (routines) call other functions (sub ...

  3. .NET PageAdmin CMS

    .NET PageAdmin CMS 完全破解步骤(非简单去版权) 其实当初我的目的是很纯洁的,只是想找一个简单的网站生成模板,由于对.net更熟悉一点,就去搜索了.net框架的CMS,看它的介绍挺强 ...

  4. MongoDB学习之--增删改查（2）

    昨天简单介绍了官方驱动操作MongoDB进行增删查操作的,今天继续介绍更新操作..... 方法简介 官方驱动中更新操作使用collection的Update方法,有泛型和非泛型两个版本: 其签名如下( ...

  5. GeoHash核心解析

    GeoHash核心解析 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐馆,并选了其中 ...

  6. 安装Theano

    参考文档 http://deeplearning.net/software/theano/install_centos6.html#install-centos6 安装依赖库 sudo yum ins ...

  7. Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照

    Citrix 服务器虚拟化之六  Xenserver虚拟机创建与快照 在Xenserver上可以创建Windows和Linux等虚拟机,Xenserver支持大部分的主流操作系统,可以使用 XenCe ...

  8. 获取EditText的光标位置

    editText.addTextChangedListener(new TextWatcher(){ @Override         public void afterTextChanged(Ed ...

  9. HDU--杭电--3415--Max Sum of Max-K-sub-sequence--队列--双向队列

    Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  10. yum局域网软件源搭建

    之前的Demo算是告一段落了,期末的各种考试报告也结束了. 暑假的一项任务就是和其他几个同学一起,在若干台服务器上安装openstack,虚拟出更多的机器,对各种分布式/并行数据分析平台进行测试. 目 ...