html部分

......
<body>
<canvas id="myCanvas" width="400" height="400" ></canvas>
<!-- 给动画添加控制按钮 -->
<div>
    <button id="startAnimation">Start</button>
    <button id="stopAnimation">Stop</button>
</div>
......

圆周运动
相关知识：三角函数
方法：将形状放在周长上角度为0弧度的位置，该位置位于右手边，在每次动画循环中，只需增加位于圆周上的形状的角度，就可以使形状沿着圆周运动。
需要解决的问题：
如何计算位于圆周上形状的（x,y）坐标值
解决：需要知道三角形邻边和对边的长度，分别代表x,y的位置

var angle = 45;
var adjRatio = Math.cos(angle*(Math.PI/180));   // 余弦-斜边-邻边
var oppRatio = Math.sin(angle*(Math.PI/180));   // 正弦-对边-斜边
var radius = 50;
var x = radius * adjRatio;
var y = radius * oppRatio;

位置：定义shape类，并向其添加属性，

var shape = function(x,y,canvasWidth,canvasHeight){
 	this.x = x;
 	this.y = y;
 	this.width = width;
 	this.height = height;
 	this.radius = Math.random()*30;    // 介于0~30之间的随机半径
 	this.angle = 0;   // 起始的角度值
}

计算位于圆周上当前角度的形状多对应的x,y的值，
圆周通过半径定义
注意：形状对象中定义的点（x,y）现在引用的是圆周的中心---形状围绕它旋转的点，而不是起点

var x = temshape.x+(temshape.radius*Math.cos(temshape.angle*(Math.PI/180)));
var y = temshape.y+(temshape.radius*Math.sin(temshape.angle*(Math.PI/180)));
temshape.angle+=5;    // 增加旋转的角度
if(temshape.angle>360){
	temshape.angle=0;
}

将新的x,y变量添加到fillRect中

context.fillRect(x,y,temshape.width,temshape.height)   // 画矩形

---------------------------完整代码--------------------------------

<script>
        function draw1(id){
		var myCanvas = $('#myCanvas');
		var context = myCanvas.get(0).getContext('2d');
		var canvasWidth = myCanvas.width();
		var canvasHeight = myCanvas.height();
		var startButton = $('#startAnimation');
 		var stopButton = $('#stopAnimation');
 		var playAnimation = true;
 		startButton.hide();
 		startButton.click(function(){
 			$(this).hide();
 			stopButton.show();
 			playAnimation = true;
 			animate();
 		})
 		stopButton.click(function(){
 			$(this).hide();
 			startButton.show();
 			playAnimation = false;
 		})
 		var shape = function(x,y,canvasWidth,canvasHeight){
 			this.x = x;
 			this.y = y;
 			this.width = width;
 			this.height = height;
 			this.radius = Math.random()*30;    // 介于0~30之间的随机半径
 			this.angle = 0;   // 起始的角度值
 		}
 		var shapes = new Array();
	        for(var i = 0;i<10;i++){
	            var x = Math.random()*250;
	            var y = Math.random()*250;
	            var width = height = Math.random()*50;
	            shapes.push(new shape(x,y,width,height));
	        }
 			function animate(){
 				context.clearRect(0,0,canvasWidth,canvasHeight);  // 擦除
 				var shapesLength = shapes.length;
		        for(var i=0;i<shapesLength;i++){
		            var temshape = shapes[i];
		         	var x = temshape.x+(temshape.radius*Math.cos(temshape.angle*(Math.PI/180)));
		         	var y = temshape.y+(temshape.radius*Math.sin(temshape.angle*(Math.PI/180)));
		         	temshape.angle+=5;
		         	if(temshape.angle>360){
		         		temshape.angle=0;
		         	}
		            context.fillRect(x,y,temshape.width,temshape.height)   // 画矩形
		        };
 				if(playAnimation){
 					setTimeout(animate,33);
 				}
 			}animate();
		}draw1('#myCanvas');
</script>

上图，矩形做圆周运动。

canvas学习之圆周运动的更多相关文章

  1. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  2. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  3. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  4. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  5. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  6. canvas学习（三）：文字渲染

    一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...

  7. canvas学习（二）：渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

  8. canvas学习（一）：线条，图像变换和状态保存

    canvas学习(一):线条,图像变换和状态保存 一:绘制一条线段: var canvas = document.getElementById('canvas') var ctx = canvas.g ...

  9. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

随机推荐

  1. Ubuntu安装Tcpdump

    参考:ubuntu下安装Tcpdump并使用 请先安装libpcap等,可以参照上文链接. 安装: 网址:http://www.tcpdump.org/ 解压: tar -zxvf tcpdump-4 ...

  2. 匈牙利命名法，骆驼命名法(camel)，帕斯卡（Pascal）命名法（转）

    一.匈牙利命名法      Windows 编程中用到的变量(还包括宏)的命名规则匈牙利命名法,这种命名技术是由一位能干的 Microsoft 程序员查尔斯·西蒙尼(Charles Simonyi) ...

  3. Defining Stored Programs

    ok DROP PROCEDURE IF EXISTS truncate_insert_rank_month; DELIMITER /w/ CREATE PROCEDURE truncate_inse ...

  4. Amazon captcha

    Navigated to https://images-na.ssl-images-amazon.com/captcha/xzqdsmvh/Captcha_dxnamcsjjf.jpgdocument ...

  5. IoC容器装配Bean（xml配置方式）（Bean的生命周期）

    1.Spring管理Bean,实例化Bean对象 三种方式 第一种:使用类构造器实例化(默认无参数) package cn.itcast.spring.initbean; /** * 使用构造方法 实 ...

  6. linux指定目录安装软件后，程序找不到共享库问题

    以svn为例,64位centos yum install subversion --installroot=/usr/svn/后 执行svn命令,报错svn: error while loading ...

  7. OAuth的机制原理讲解及开发流程

    本想前段时间就把自己通过QQ OAuth1.0.OAuth2.0协议进行验证而实现QQ登录的心得及Demo实例分享给大家,可一直很忙,今天抽点时间说下OAuth1.0协议原理,及讲解下QQ对于Oaut ...

  8. docker jenkins

    https://segmentfault.com/a/1190000003732967

  9. An Implementation of Double-Array Trie

    Contents What is Trie? What Does It Take to Implement a Trie? Tripple-Array Trie Double-Array Trie S ...

  10. Sparse Graph---hdu5876（set+bfs+补图求最短路）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5876 题意:有一个含有n个点的无向图,已知图的补图含有m条边u, v:求在原图中,起点s到 ...