<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var num = 0;

    var inum2 = 0;

    var value = 1;

    setInterval(function ()

    {

        num++;

        oGC.save();

        if(inum2 == 100)

        {

            value = -1;

        }

        else if(inum2 == 0)

        {

            value = 1;

        }

        inum2 += value;

        oGC.clearRect(0,0,oC.width,oC.height);

        oGC.translate(100,100);

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

        oGC.scale(inum2*1/50,inum2*1/50);

        oGC.translate(-50,-50);

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

        oGC.restore();

    },30)

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

    <canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

html5 canvas 旋转扩大的更多相关文章

  1. html5 canvas旋转

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

  2. html5 canvas旋转+缩放

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

  3. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

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

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

  9. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. [HDOJ2602]Bone Collector（01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 裸的... #include <algorithm> #include <io ...

  2. 【转】对Android开发者有益的40条优化建议

    下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...

  3. UC编程之网络通信(TCP/UDP)

    网络常识 OSI 7层模型(人机交互) 物理层.数据链路层.网络层.传输层.会话层.表现层.应用层 常见协议: tcp/udp/ip/ftp/http... IP地址--就是计算机在网络中的地址,是一 ...

  4. C#判断字符串为空的几种方法和效率判断

    C#判断字符串为空的几种方法和效率判断 string定义 1.1 string str1="":会定义指针(栈),并在内存里划一块值为空的存储空间(堆),指针指向这个空间.1.2 ...

  5. [转] POJ计算几何

    转自:http://blog.csdn.net/tyger/article/details/4480029 计算几何题的特点与做题要领:1.大部分不会很难,少部分题目思路很巧妙2.做计算几何题目,模板 ...

  6. 【解题报告】[动态规划] RQNOJ PID5 / 能量项链

    原题地址:http://www.rqnoj.cn/problem/5 解题思路: 今天刚刚才知道了区间DP..Orz..本来以为是状态压缩DP,后来看到数据量才发现原来不是.后来参考了别人的题解.自己 ...

  7. 一条sql导致数据库整体性能下降的诊断和解决的全过程

    今天早上一来,数据库load就比往常高了许多.想想数据库唯一的变化是昨天早上我曾经重新分析过数据库对象. [@more@] 发现数据库load很高,首先看top发现没有特别异常的进程,在数据库中适时抓 ...

  8. Android Retrofit实现原理分析

    retrofit有几个关键的地方. 1.用户自定义的接口和接口方法.(由动态代理创建对象.) 2.converter转换器.(把response转换为一个具体的对象) 3.注解的使用. 让我们跟随Ap ...

  9. 通过文件流stream下载文件

    public ActionResult ShowLocalizedXML(int id) { string orderName = ""; string xmlString = G ...

  10. Hibernate查询出现java.lang.IllegalArgumentException异常解决方法

    Hibernate查询出现java.lang.IllegalArgumentException. 异常信息如下:java.lang.IllegalArgumentException        at ...