<!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. Win2008R2PHP5.4环境加载Zend模块

    1.需要2个文件 Zend Optimizer和Zend Guard Loade s 下载Zend Guard Loader包.(官方地址:http://www.zend.com/en/product ...

  2. Asp.net MVC4 Knockoutjs BootStrap Ace NinJect Jqgrid sqlserver2008

    Asp.net MVC4 Knockoutjs  BootStrap Ace NinJect  Jqgrid sqlserver2008

  3. centos+php+coreseek+sphinx+mysql之二sphinx配置篇

    先进入文件夹进行以下操作 cd /usr/local/coreseek/etc cp sphinx.conf.dist sphinx.conf source src1 { sql_host = 127 ...

  4. JS正则表达式获取字符串中特定字符

    JS正则表达式获取字符串中得特定字符,通过replace的回调函数获取. 实现的效果:在字符串中abcdefgname='test'sddfhskshjsfsjdfps中获取name的值test  实 ...

  5. [读书心得]资料分页的优化，以SQL 2012的 OFFSET-FETCH为例

    这是我的文章备份,原始出处:[读书心得]资料分页的优化,以SQL 2012的 OFFSET-FETCH为例 http://www.dotblogs.com.tw/mis2000lab/archive/ ...

  6. 開賣！下集 -- ASP.NET 4.5 專題實務(II)－範例應用與 4.5新功能【VB/C# 雙語法】

    開賣!下集 -- ASP.NET 4.5 專題實務(II)-範例應用與 4.5新功能[VB/C# 雙語法] 我.....作者都沒拿到書呢! 全台灣最專業的電腦書店 -- 天瓏書局 已經開賣了! 感謝天 ...

  7. jQuery学习笔记(1)

    设置和获取HTML,文本和值 val()方法: 1.单选框 <html xmlns="http://www.w3.org/1999/xhtml"> <head r ...

  8. STM32F0xx_TIM基本延时配置详细过程

    前言 关于定时器大家都应该不会陌生,因为处理器都有这个功能.今天总结的F0系列芯片的定时器根据芯片型号不同,数量也不同.定时器分类:基本定时器.通用定时器和高级定时器.计数位数也有不同,有16位的,有 ...

  9. 实战Django：官方实例Part3

    前面两个部分我们介绍了投票应用的框架和后台管理部分.接下来舍得要介绍这个应用面向用户的界面. 这里我们要引入一个新的概念,"视图".在Django中,视图是一根连接模型和模板的纽带 ...

  10. JavaWeb之 JSP:内置对象，EL表达式，JSP标签基础

    JSP的内置对象 什么是JSP的内置对象呢? 在JSP页面进行编程的时候,如果我们要使用一些对象,如:HttpSession,ServletConfig,ServletContext这些对象,如果每次 ...