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. sqlite相关工具使用

    sqlite3可视化工具 1.sudo apt-get install sqlitebrowser 2.sudo apt-get install sqliteman3.sqlitestudio需要去官 ...

  2. [IT学习]PowerBi 入门

    从哪里开始呢?注册一个账号,从PowerBi的help开始就行了.Get Started会带领你从get data讲起,建立dataset,建立report,一直到dashboard创建. 下面这个链 ...

  3. [听课笔记]Professor Michael Cusumano's New Book:" Strategy Rules: Five Timeless Lessons from Bill Gates, Andy Grove, and Steve Jobs"

    1. Look Forward, Reason Back Extrapolate, interpret, then tie vision to concrete actions2. Make Big ...

  4. 使用AndroidStudio自动生成JavaDoc文档

    选中所需要生成的Module,找到工具栏上的 Tools,选择 Generate JavaDoc 出现如图的窗口 选择输出路径,就自动生成. 如果出现编码错误提示,则在 Other command l ...

  5. 1763 An Essay towards solving a Problem in the Doctrine of Chances

    https://en.wikipedia.org/wiki/An_Essay_towards_solving_a_Problem_in_the_Doctrine_of_Chances

  6. P2409 Y的积木

    luogu月赛 暴力dfs,估计过不了几个点,大概也就得30分左右? #include <bits/stdc++.h> using namespace std; const int max ...

  7. （转）android 在电脑上显示真机屏幕

    http://my.oschina.net/u/202293/blog/199954 方法一: 可以用360手机助手等实现. 方法二: 想把手机屏幕显示在电脑屏幕上时就需要使用Android Scre ...

  8. Excel VBA

    =COUNTIF(Y3:Y212,"=11") =SUMIF(Y3:Y212,"=11",AA3:AA212) =SUMPRODUCT((Y3:Y212=&qu ...

  9. RocEDU.阅读.写作

    RocEDU.阅读.写作 一.选择图书 <黑客大曝光> 二.读书计划 56天内学习完.时间:2016.01.25--2016.03.20 三.承诺 宋宸宁郑重承诺: 1.在56天内(开始时 ...

  10. python : dictionary changed size during iteration

    1. 错误方式 #这里初始化一个dict >>> d = {'a':1, 'b':0, 'c':1, 'd':0} #本意是遍历dict,发现元素的值是0的话,就删掉 >> ...