<!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. NDK(3)java.lang.UnsatisfiedLinkError: Native method not found解决方法

    调用native方法时报错如下 : “java.lang.UnsatisfiedLinkError: Native method not found....  ”: 原因分析: 链接器只看到了在so中 ...

  2. C#中的文件同步

    How to: Synchronize Files by Using Managed Code FileSyncProvider Class File Synchronization Provider ...

  3. computer使用快捷小技巧

    1.快速打开运行  win+R 几个运行实用命令 notepad--------打开记事本 mspaint--------画图板 calc-----------启动计算器 compmgmt.msc-- ...

  4. Android开源库--ActiveAndroid（active record模式的ORM数据库框架）

    Github地址:https://github.com/pardom/ActiveAndroid 前言 我一般在Android开发中,几乎用不到SQLlite,因为一些小数据就直接使用Preferen ...

  5. Android在OnCreate中获取控件的宽度和高度

    在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高 ...

  6. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  7. UVa 537 Artificial Intelligence?

    题目大意:输入一个字符串,根据物理公式P=U*I,已知其中两个量,求第三个量,结果保留两位小数.   Artificial Intelligence?  Physics teachers in hig ...

  8. 软件设计之UML—UML的构成[上]

    UML是一种通用的建模语言,其表达能力相当的强,不仅可以用于软件系统的建模,而且可用于业务建模以及其它非软件系统建模.UML综合了各种面向对象方法与表示法的优点,至提出之日起就受到了广泛的重视并得到了 ...

  9. 微信开发小结-PHP

    功能点: 1.  网页授权获得微信用户信息 用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 注意点:Scope为snsapi_base 只能获 ...

  10. jsp 三大指令和动作标签

    jsp三大指令 一个jsp页面中可以有0-N个指令 1.page--->最复杂:<%@page language="" ...%> *pageEncoding和c ...