<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>html5 Canvas动画旋转的小方块；</title>

    <link rel="stylesheet" href="">

</head>

<body>

    <script>

        window.onload=function(){

            var canvas = document.querySelector("canvas");

            canvas.width = canvas.height = 500

            canvas.style.background = "red"

            if (canvas.getContext) {

                var ext = canvas.getContext("2d");

                var num = 0;

                var scale=0;

                var value=0

                ext.fillStyle = "#f90";

                ext.translate(canvas.width / 2, canvas.height / 2);

                function rotate() {

                    ext.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height)

                    num++;

                     if(scale==100){

                         value=-1;

                     }else if(scale==0){

                         value=1

                     }

                     scale+=value

                    ext.save();

                    ext.rotate(num * Math.PI / 180)

                    ext.scale(scale*1/50,scale*1/50)

                    console.log(scale);

                    ext.translate(-50, -50)

                    ext.fillRect(0, 0, 100, 100);

                    ext.restore();

                }

                var t=setInterval(rotate,30);

                canvas.onmouseover=function(){

                    clearInterval(t);

                }

                canvas.onmouseout=function(){

                    t=setInterval(rotate,30);

                }

            }

        }

    </script>

    <canvas></canvas>

</body>

</html>

DEMO地址：http://codepen.io/jonechen/pen/xVbPLJ

Html5 Canvas动画旋转的小方块；的更多相关文章

  1. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  2. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  3. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  6. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  7. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  8. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  9. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

随机推荐

  1. MyBatis学习系列一之环境搭建

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 学习一个新的知识,首先做一个简单的例子使用一下,然后再逐步深入.MyBat ...

  2. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

  3. Connect to a Windows PC from Ubuntu via Remote Desktop Connection

    http://www.7tutorials.com/connecting-windows-remote-desktop-ubuntu A useful feature of Windows is be ...

  4. zencart安装第三步出现空白

    问题描述:在安装zencart时,在第三步同意协议,然后点击下一步时,页面经过漫长的等待后就显示空白. 解决方法:打开php.ini,将max_execution_time = 30 -> ma ...

  5. 两分钟让你明白什么是ERP

    把专业的问题通俗化——    ERP(Enterprise Resource Planning)企业资源计划系统,是指建立在信息技术基础上,以系统化的管理思想,为企业决策层及员工提供决策运行手段的管理 ...

  6. CentOS6 更改Mysql数据库的数据存放位置

    mysql使用yum安装时,默认的数据是存储在/var/lib/mysql下.一般情况下,为了数据的安全性,建议将mysql数据库的数据文件存储在系统的第二块磁盘上的目录下可以按照以下步骤进行操作: ...

  7. LevelDB系列之Log文件

    上节内容讲到log文件在LevelDb中的主要作用是系统故障恢复时,能够保证不会丢失数据.因为在将记录写入内存的Memtable之前,会先写入Log文件,这样即使系统发生故障,Memtable中的数据 ...

  8. Ubuntu14.04安装GNOME3桌面

    以下是安装方法: sudo add-apt-repository ppa:gnome3-team/gnome3 sudo apt-get update sudo apt-get dist-upgrad ...

  9. SQL Server 基础之《学生表-教师表-课程表-选课表》

    一.数据库表结构及数据 建表 CREATE TABLE Student ( S# INT, Sname ), Sage INT, Ssex ) ) CREATE TABLE Course ( C# I ...

  10. 解决ubuntu15 下没有声音

    个人经验,个人适用. 今天想在网上在线听一首歌,结果没有声音.好气啊,于是百度,google,发现好像这个问题很常见.于是按着来,什么alsamixer还有更改什么audio权限的,但在我这都没用. ...