<!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. BZOJ 2727 双十字（树状数组）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2727 题意: 思路:思路来自这里.首先对于每个位置(i,j)用C[i][j]表示该位置同 ...

  2. Back to Back Order Process

    Steps involved involved in back to back order process in oracle apps 1. Enter Sales Order 2. Book Sa ...

  3. UVa 122 (二叉树的层次遍历) Trees on the level

    题意: 输入一颗二叉树,按照(左右左右, 节点的值)的格式.然后从上到下从左到右依次输出各个节点的值,如果一个节点没有赋值或者多次赋值,则输出“not complete” 一.指针方式实现二叉树 首先 ...

  4. Volley : "参数param:{ inoutNo:inoutNo ,whcode:’’}

    private void fuzzySearch() { mRequestQueue = Volley.newRequestQueue(getActivity()); String str = Sha ...

  5. UISlide

    UISlide属性   1.   minimumValue  : 当值可以改变时,滑块可以滑动到最小位置的值,默认为0.0 _slider.minimumValue = 10.0; 2.   maxi ...

  6. UIPanGestureRecognizer中translationInView的理解

    原因是在破船大牛的blog上面看到了一个demo #import <UIKit/UIKit.h> @interface ViewController : UIViewController ...

  7. hadoop-初学者写map-reduce程序中容易出现的问题 3

    1.写hadoop的map-reduce程序之前所必须知道的基础知识: 1)hadoop map-reduce的自带的数据类型: Hadoop提供了如下内容的数据类型,这些数据类型都实现了Writab ...

  8. Android 轻量级ORM数据库开源框架ActiveAndroid 源码分析

    ActiveAndroid 项目地址在https://github.com/pardom/ActiveAndroid 关于他的详细介绍和使用步骤 可以看下面两篇文章: https://github.c ...

  9. jQuery autoComplete 样式

    前提:使用了jQuery-ui 官网:http://jqueryui.com/autocomplete/ /*** autocomplete ***/ .ui-widget-content { bac ...

  10. Linux makefile教程之总述二[转]

    Makefile 总述——————— 一.Makefile里有什么? Makefile里主要包含了五个东西:显式规则.隐晦规则.变量定义.文件指示和注释. 1.显式规则.显式规则说明了,如何生成一个或 ...