<!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. 用root直接登入ubuntu 14_04

    官网下载地址:http://www.ubuntu.com/download/desktop64位桌面版:http://www.ubuntu.com/ubuntu-releases/14.04/ubun ...

  2. HDU 4757 Tree（可持久化trie）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4757 题意:给出一棵树,节点有权值.每次询问x到y的路径上与z抑或的最大值. 思路:可持久化trie. ...

  3. POJ2186 POPULAR COW

    链接:http://poj.org/problem?id=2186 题意:给你N个点,然后在给你N条有向边,然后让你找出这样的点S,S满足条件图上任意一点都能到达S. 要想满足任意一点都能到达,首先满 ...

  4. codeforces 430 A Points and Segments (easy)

    题意:给出n个点,m个区间,需要给这些点涂上蓝色或者红色,使得每个区间里面的点的红色的点的个数与蓝色的点的个数的差值小于1 唉,题目的标题就标注了一个easy= = 最开始做的时候对点还有区间都排序了 ...

  5. java金额的加减乘除

    package com.wedge.edp.framework.common.util; import java.math.BigDecimal; /** * 金额的加减乘除 */ public cl ...

  6. 07day2

    居然是动规专场.这样不好吧?   采药 [问题描述] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到 ...

  7. NHibernate实例化类部分属性

    NHibernate 为习惯SQL的开发者提供了接口,将查询的结果转变为持久化对象.虽然该方法不是很提倡. GetCurrentSession().CreateSQLQuery(sql) 参数sql就 ...

  8. 【转】bash调试经验

    原文网址:http://blog.csdn.net/yfkiss/article/details/8636758 bash是Unix/Linux操作系统最常用的shell之一,它非常灵活,和awk.c ...

  9. ArcEngine9.3报错Create output feature class failed

    ArcEngine9.3执行IFeatureDataConverter.ConvertFeatureClass Method出错如下错误信息: Create output feature class ...

  10. datawindow.net数据窗口卡片设置滚动条位置

    int pos = Convert.ToInt32(dw1.Describe(colname + ".y")); pos = pos - 40; dw1.Modify(" ...