<!DOCTYPE html>

 <html>

 <head>

 <title>Making things move</title>

 <meta charset="gbk">

 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function() {

    var canvas = $("#myCanvas");

    var context = canvas.get(0).getContext("2d");

    var canvasWidth = canvas.width();

    var canvasHeight = canvas.height();

    var playAnimation = true;

    var startButton = $("#startAnimation");

    var stopButton = $("#stopAnimation");

     var canvas1 = $("#myCanvas1");

     var context1 = canvas1.get(0).getContext("2d");

     context1.arc(150,150,100,0,2*Math.PI,true);

     context1.stroke();//填充绘制的圆

     context1.beginPath();

     context1.arc(300,300,100,0,2*Math.PI,true);

     context1.strokeStyle="red";

     context1.stroke();//填充绘制的圆

     startButton.hide();

     startButton.click(function() {

       $(this).hide();

       stopButton.show();

       playAnimation = true;

       animate();

    });

    stopButton.click(function() {

      $(this).hide();

      startButton.show();

      playAnimation = false;

    });

    // Class that defines new shapes to draw

    var Shape = function(x, y,radius,angle) {

      this.x = x;

      this.y = y;

      this.radius=radius;

      this.angle = angle;

     };

    var shapes = new Array();

    shapes.push(new Shape(150, 150, 100,5));

    shapes.push(new Shape(300, 300, 100,10));

  function animate() {

   context.clearRect(0, 0, canvasWidth, canvasHeight);

   var shapesLength = shapes.length;

   for (var i = 0; i < shapesLength; i++) {

     var tmpShape = shapes[i];

     var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));

     var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));

     if(i==0) tmpShape.angle += 5;

     else tmpShape.angle += 10;

     if (tmpShape.angle > 360) {

       tmpShape.angle = 0;

     };                    

     context.fillRect(x, y, 10, 10);

   };

   if (playAnimation) {

     setTimeout(animate, 33);

   };

  };

   animate();

 });

 </script>

 </head>

 <body>

  <div>

    <button id="startAnimation">Start</button>

    <button id="stopAnimation">Stop</button>

  </div>

  <canvas id="myCanvas" width="800" height="500" style="z-index:2;position:absolute"></canvas>

  <canvas id="myCanvas1" width="800" height="500" style="z-index:1;position:absolute"></canvas>

 </body>

 </html>

请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动的更多相关文章

  1. ××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

    题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动:   原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...

  2. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  3. js在页面中添加一个元素 —— 添加弹幕

    参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...

  4. (一)在HTML页面中实现一个简单的Tab

    在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...

  5. jquery[siblings]取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,用于筛选同辈元素的表达式 $("#pageList").click(function(){ $(this).pa ...

  6. 分别应用include指令和include动作标识在一个jsp页面中包含一个文件。

    分别应用include指令和include动作标识在一个jsp页面中包含一个文件. hello.jsp <%@ page language="java" import=&qu ...

  7. jquery中修改一个元素的值或内容

    jquery中修改一个元素的值或内容,比如数值增加可以使用这个方法取得原值并+1 $this.text(function(i,ot){return Number(ot)+1;});

  8. PHP的排列组合问题 分别从每一个集合中取出一个元素进行组合，问有多少种组合？

    首先说明这是一个数学的排列组合问题C(m,n) = m!/(n!*(m-n)!) 比如:有集合('粉色','红色','蓝色','黑色'),('38码','39码','40码'),('大号','中号') ...

  9. [jstips]向数组中插入一个元素

    向现有数组中插入一个元素是经常会见到的一个需求.你可以: 使用push将元素插入到数组的尾部: 使用unshift将元素插入到数组的头部: 使用splice将元素插入到数组的中间: 上面那些方法都是常 ...

随机推荐

  1. python视频教程：十分钟快速入门python

    想要学习python这门语言,却始终找不到一个全面的Python视频教程,倘若你是真心想学好一门语言,小编建议你亲自动手实践的.下面来看看入门python的学习教程. Python的语言特性 Pyth ...

  2. 基于HTTP Live Streaming（HLS） 搭建在线点播系统

    1. 为何要使用HTTP Live Streaming 可以参考wikipedia HTTP Live Streaming(缩写是 HLS)是一个由苹果公司提出的基于HTTP的流媒体 网络传输协议.是 ...

  3. android:windowSoftInputMode及其他部分属性用法

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 今天我们来讲讲android:windoSoftInputMode的用法,许多同学会为软键盘的弹出. ...

  4. 30道四则运算<2>单元测试

    该测试未实现除法 该测试中间多了/)两个符号,而且没有等号和回车. 该测试也没有符合除法要求 该测试也没有满足除法要求 该测试满足要求. 总结:程序中涉及到有除法的输出都有问题,多次改正未果:其他条件 ...

  5. iOS-申请开发证书流程

    1.开发者证书(分为开发和发布两种,类型为ios Development,ios Distribution),这个是最基础的,不论是真机调试,还是上传到appstore都是需要的,是一个基证书,用来证 ...

  6. Android FM模块学习之一 FM启动流程

    最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层. 上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. FM启动流程:如下图: 先进入FMRadio.jav ...

  7. LeetCode Maximum Subarray （最大子段和）

    题意: 给一个序列,求至少含一个元素的最大子段和? 思路: 跟求普通的最大子段和差不多,只不过需要注意一下顺序.由于至少需要一个元素,所以先将ans=nums[0].接下来可以用sum求和了,如果小于 ...

  8. php面向对象之抽像类、接口、final、类常量

    一.抽像类(abstract)        在我们实际开发过程中,有些类并不需要被实例化,如前面学习到的一些父类,主要是让子类来继承,这样可以提高代码复用性语法结构:  代码如下 复制代码   ab ...

  9. 【转】eclipse 安装插件

    eclipse安装插件或许没有什么多的可讲,但对于刚刚接触eclipse这款IDE的新手来说,可能还是会有点棘手! eclipse安装插件大致三种方法: 方法一:自身安装器 使用eclipse的Sof ...

  10. 【转】java 注释规范

    原则: 1.注释形式统一 在整个应用程序中,使用具有一致的标点和结构的样式来构造注释.如果在其它项目中发现它们的注释规范与这份文档不同,按照这份规范写代码,不要试图在既成的规范系统中引入新的规范. 2 ...