<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    var canvas = oc.getContext('2d');

    /*偏移*/

    canvas.translate(200, 200);

    var num = 0, multiple = 1, value = 1;

    setInterval(function(){

        num++;

        if(multiple == 100 || multiple == 0){

            value *= -1;

        }

        multiple += value;

        /*局面canvas的起始点*/

         canvas.save();

         /*图形倍数(横向放大倍数,纵向放大倍数)*/

         canvas.scale(multiple*1/50, multiple*1/50);

         /*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/

        canvas.clearRect(-150, -150, oc.width, oc.height);

        /*旋转弧度*/

        canvas.rotate(num*Math.PI/180);

        /*偏移旋转中心*/

        canvas.translate(-50, -50);

        /*填充方块*/

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

        /*局面canvas的结束点*/

        canvas.restore();

    }, 30);

</script>

HTML5 Canvas 小例子 伸缩旋转方块的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  2. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  6. html5 canvas多个图像旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

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

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

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

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

随机推荐

  1. tomcat源码 Connector

    Connector容器主要负责解析socket请求,在tomcat中的源码位于org.apache.catalina.connector和org.apache.coyote包路径下:通过上两节的分析, ...

  2. Spring mvc Json 的正确返回姿势

    我们经常都需要封装统一JSON格式 例如以下形式 { “data”:“输出的数据”, “code”:“响应代码”, “msg”:“响应信息” } /** * Created by linli on 2 ...

  3. quartz里job不执行的解决方案(并发量太低原因)

    这里写链接内容 使用框架spring3+quartz1.8 生产环境中碰到会有job一直不执行的情况,后来分析是因为quartz中线程总数太少,而项目中所有的job都是并发执行的就会导致当到达时间节点 ...

  4. Ubuntu 14.10 下连接SuperVessel Cloud

    第一次创建实例后,系统会分配一个VPN用户,用于连接到系统. 官方帮助文档给出了使用方法 Linux VPN 客户端的配置方法 . 安装 VPNC: $ apt-get install vpnc $ ...

  5. Javascript中的原型、原型链（十）

    一.原型 每当创建一个函数时,函数就会包含一个prototype属性,这个属性其实相当于一个指针,指向调用该构造函数创建的对象原型. 这个对象原型里面有一个constructor属性,这个属性又指向构 ...

  6. appium 点击物理按键

    有时候我们遇到一些需要点击手机物理返回按键,或者home键等操作,总结如下: adb shell input keyevent 点击home键: adb shell input keyevent 3 ...

  7. Consul实践指导-DNS接口

    DNS是consul提供的主要查询接口之一.DNS接口允许应用程序在没有与consul高度集成的情况下使用服务发现. 例如:替代consul的HTTP API请求,主机能够通过名字查找直接使用DNS服 ...

  8. IDC：IDC（互联网数据中心）

    ylbtech-IDC:IDC(互联网数据中心) IDC为互联网内容提供商(ICP).企业.媒体和各类网站提供大规模.高质量.安全可靠的专业化服务器托管.空间租用.网络批发带宽以及ASP.EC等业务. ...

  9. MySQL数据库事务各隔离级别加锁情况--read committed && MVCC(转载)

    http://www.imooc.com/article/17290 http://www.51testing.com/html/38/n-3720638.html https://dev.mysql ...

  10. 清除OpenStack网络与路由

    下面,我们以删除一个路由设备为例,讲解整个过程(以下命令都在控制节点执行) 列出所有路由设备,获得要删除的路由器id # neutron router-list [root@controller ~] ...