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. Apache Spark源码走读之10 -- 在YARN上运行SparkPi

    y欢迎转载,转载请注明出处,徽沪一郎. 概要 “spark已经比较头痛了,还要将其运行在yarn上,yarn是什么,我一点概念都没有哎,再怎么办啊.不要跟我讲什么原理了,能不能直接告诉我怎么将spar ...

  2. 背景图片与 CSS的那些事

    在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...

  3. PHP OO 编程笔记

    1. 类中的方法不是全局方法,可以和外部的普通方法重名,例如: <?php function time(); 则会报错:不能重新声明方法 Fatal error: Cannot redeclar ...

  4. 异步调试神器Slog，“从此告别看日志，清日志文件了”

    微信调试.API调试和AJAX的调试的工具,能将日志通过WebSocket输出到Chrome浏览器的console中  — Edit 92 commits 4 branches 3 releases ...

  5. nginx下使用memcache

    nginx配置支持memcache,但不支持写,支持读,所以读取部分由程序设置,整个代码如下nginx的server段配置如下:#将静态文件放入memcachelocation ~* \.(gif|j ...

  6. cPanel设置自定义404错误页

    利用这个cpanel的错误页工具,你就可以定制错误页面了.设置自定义404错误页,有两种简单的方法. 一,利用cpanel后台控制面板添加设置404自定义错误页的方法 步骤       1.登录cPa ...

  7. page show

    controller public function record() { $r = ; $m = M(); $query = $m->query('select count(1) as cou ...

  8. Thwarting Buffer Overflow Attacks Stack Randomization

    Computer Systems A Programmer's Perspective Second Edition address-space layout randomization

  9. [troubleshoot][archlinux][X] plasma(KDE) 窗口滚动刷新冻结（约延迟10s）（已解决，root cause不明，无法再次复现）

    现象: konsole,setting等plasma的系统应用反应缓慢,在滚动条滚动时,尤为明显. 触发条件: 并不是十分明确的系统滚动升级(Syu)后,产生. 现象收集: 可疑的dmesg [ :: ...

  10. 【转】Eclipse Class Decompiler——Java反编译插件

    闲暇之余,写了一个Eclipse下的Java反编译插件:Eclipse Class Decompiler,整合了目前最好的2个Java反编译工具Jad和JD-Core,并且和Eclipse Class ...