1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Making things move</title>
  5. <meta charset="gbk">
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9. var canvas = $("#myCanvas");
  10. var context = canvas.get(0).getContext("2d");
  11.  
  12. var canvasWidth = canvas.width();
  13. var canvasHeight = canvas.height();
  14. var playAnimation = true;
  15.  
  16. var startButton = $("#startAnimation");
  17. var stopButton = $("#stopAnimation");
  18. var canvas1 = $("#myCanvas1");
  19. var context1 = canvas1.get(0).getContext("2d");
  20. context1.arc(150,150,100,0,2*Math.PI,true);
  21. context1.stroke();//填充绘制的圆
  22. context1.beginPath();
  23. context1.arc(300,300,100,0,2*Math.PI,true);
  24. context1.strokeStyle="red";
  25. context1.stroke();//填充绘制的圆
  26.  
  27. startButton.hide();
  28. startButton.click(function() {
  29. $(this).hide();
  30. stopButton.show();
  31. playAnimation = true;
  32. animate();
  33. });
  34.  
  35. stopButton.click(function() {
  36. $(this).hide();
  37. startButton.show();
  38. playAnimation = false;
  39. });
  40.  
  41. // Class that defines new shapes to draw
  42. var Shape = function(x, y,radius,angle) {
  43. this.x = x;
  44. this.y = y;
  45. this.radius=radius;
  46. this.angle = angle;
  47. };
  48.  
  49. var shapes = new Array();
  50. shapes.push(new Shape(150, 150, 100,5));
  51. shapes.push(new Shape(300, 300, 100,10));
  52.  
  53. function animate() {
  54. context.clearRect(0, 0, canvasWidth, canvasHeight);
  55. var shapesLength = shapes.length;
  56. for (var i = 0; i < shapesLength; i++) {
  57. var tmpShape = shapes[i];
  58. var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
  59. var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
  60.  
  61. if(i==0) tmpShape.angle += 5;
  62. else tmpShape.angle += 10;
  63. if (tmpShape.angle > 360) {
  64. tmpShape.angle = 0;
  65. };
  66.  
  67. context.fillRect(x, y, 10, 10);
  68. };
  69.  
  70. if (playAnimation) {
  71. setTimeout(animate, 33);
  72. };
  73. };
  74.  
  75. animate();
  76. });
  77. </script>
  78. </head>
  79.  
  80. <body>
  81. <div>
  82. <button id="startAnimation">Start</button>
  83. <button id="stopAnimation">Stop</button>
  84. </div>
  85. <canvas id="myCanvas" width="800" height="500" style="z-index:2;position:absolute"></canvas>
  86. <canvas id="myCanvas1" width="800" height="500" style="z-index:1;position:absolute"></canvas>
  87.  
  88. </body>
  89. </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. ZOJ 3329 - One Person Game

    题意:每次筛三个骰子面分别为k1,k2,k3,如果三个骰子的值分别为a,b,c则得分置0,否则得到分数加上三个骰子的值的和,如果得分大于等于n则结束游戏. 设E[i]表示当前得到i分时结束游戏的期望. ...

  2. [UIImage resizableImageWithCapInsets:]使用注意

    转自:http://www.cnblogs.com/scorpiozj/p/3302270.html 最近在sae上搭建了个wp,因为深感自己前端的东西缺乏,所以想依次为契机,学习一下.本文是从个人的 ...

  3. 迪士尼黑科技:爬墙机器人 VertiGo

    12 月 30 日,迪士尼研发出的一款爬墙机器人曝光了一段有趣的视频.从视频里可看出这个机器人碰到墙壁时迅速地作出反应爬了上去. 据了解,这个爬墙机器人名叫 VertiGo,由迪士尼研究中心和苏黎世联 ...

  4. 链表(C++语言实现)

    我使用的是严蔚敏的数据结构C语言版,很反感里面的全是伪代码,平常也没怎么敲代码,链表和顺序表是数据结构的第一个实验课程,顺序表还好,但是链表就有点困难了,因为里面涉及指针的运用.我对于指针并不是很精通 ...

  5. 【Tsinghua OJ】范围查询(Range)问题

    [问题描述]数轴上有n个点,对于任一闭区间 [a, b],试计算落在其内的点数. [输入]第一行包括两个整数:点的总数n,查询的次数m.第二行包含n个数,为各个点的坐标.以下m行,各包含两个整数:查询 ...

  6. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. Charlie's Change_完全背包&&路径记录

    Description Charlie is a driver of Advanced Cargo Movement, Ltd. Charlie drives a lot and so he ofte ...

  8. Smart210学习记录-------Linux设备驱动结构

    cdev结构体 1 struct cdev { 2 struct kobject kobj; /* 内嵌的 kobject 对象 */ 3 struct module *owner; /*所属模块*/ ...

  9. nginx下面部署fast-cgi和C++【原】

    1.cgi文件的代码 #include "fcgi_stdio.h" #include <stdlib.h> #include <stdio.h> int ...

  10. JS基础知识(作用域/垃圾管理)

    1.js没有块级作用域 if (true) { var color = “blue”; } alert(color); //”blue” for (var i=0; i < 10; i++){ ...