1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function ()
  8. {
  9.     var oC = document.getElementById('c1');
  10.     var oGC = oC.getContext('2d');
  11.  
  12.     var num = 0;
  13.     var inum2 = 0;
  14.     var value = 1;
  15.  
  16.     setInterval(function ()
  17.     {
  18.         num++;
  19.         oGC.save();
  20.         if(inum2 == 100)
  21.         {
  22.             value = -1;
  23.         }
  24.         else if(inum2 == 0)
  25.         {
  26.             value = 1;
  27.         }
  28.  
  29.         inum2 += value;
  30.         oGC.clearRect(0,0,oC.width,oC.height);
  31.         oGC.translate(100,100);
  32.         oGC.rotate(num*Math.PI/180);
  33.  
  34.         oGC.scale(inum2*1/50,inum2*1/50);
  35.         oGC.translate(-50,-50);
  36.         oGC.fillRect(0,0,100,100);
  37.         oGC.restore();
  38.     },30)
  39.  
  40. }
  41. </script>
  42. <style>
  43. body{
  44.     background:pink;
  45.     }
  46. #c1{
  47.     background:white;
  48.     }
  49. </style>
  50. </head>
  51.  
  52. <body>
  53.     <canvas id="c1" width="400" height="400"></canvas>
  54. </body>
  55. </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. Unix/Linux 关机命令

    关机命令 AIX shutdown now Solaris init 5 Redhat shutdown now Centos shutdown now

  2. Android实现分享内容到微信朋友圈

    原文地址:http://yanwushu.sinaapp.com/android_wechat_share/ 由于需求,要实现在应用中实现分享文字+图片到微信朋友圈.在网上找了一些资料,总结如下: 思 ...

  3. CakeDC(cakephp company)Git workflow--适合于较大团队大型项目开发

    CakeDC Git workflow是一个项目开发和版本发布的工作流,在这个工作流程中开发和版本发布周期是基于几个关键阶段(key phases): Development: 所有活跃的开发活动都由 ...

  4. 【第八篇】mvc razor视图配置404 500页面

    记住是最外层的这个Web.config 在  <system.web> </system.web>节点里面配置 <customErrors defaultRedirect ...

  5. Book 最短路算法

    用HDU2544整理一下最近学的最短路算法 1.Dijkstra算法 原理:集合S表示已经找到最短路径的点,d[]表示当前各点到源点的距离 初始时,集合里面只有源点,当每个点u进入集合S时,用d[u] ...

  6. Drawable和Bitmap的区别

    Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...

  7. C语言中的三值合一

    在学习C语言中我们会发现这样一种情况: #include<stdio.h> Int main() { Int ar[10]; printf(“%p\n”,ar); printf(“%p\n ...

  8. memcached增删改查

    1)add语法:add key flag expire byteskey 键flag 标志expire 过期时间,可以是秒或一个具体的时间戳bytes 要存的东西的bytes长度 PS:只能添加内存里 ...

  9. UVA 11354 Bond 邦德 （RMQ，最小瓶颈MST）

    题意: n个城市,m条路,每条路有个危险值,要使得从s走到t的危险值最小.回答q个询问,每个询问有s和t,要求输出从s到t最小的危险值.(5万个点,10万条边) 思路: 其实要求的是任意点对之间的最小 ...

  10. HDU5463 Clarke and minecraft

    解题思路:此题刚开始,觉得好繁琐,好混乱,理清思路后,发现很简单.   具体见代码分析. #include<cstdio> #include<cstring> #include ...