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. FastDFS安装、配置、部署

    FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站. Fas ...

  2. emacs+ensime+sbt打造spark源码阅读环境

    欢迎转载,转载请注明出处,徽沪一郎. 概述 Scala越来越流行, Spark也愈来愈红火, 对spark的代码进行走读也成了一个很普遍的行为.不巧的是,当前java社区中很流行的ide如eclips ...

  3. pycharm使用笔记

    Basic code completion (the name of any class, method or variable) control + 空格  # 代码补全,如果跟系统spotligh ...

  4. A20板子上的触摸屏设备号变化后解决

  5. Amoeba基本配置

    Amoeba安装及读写分离配置一.amoeba简介官网:http://docs.hexnova.com/amoeba/index.html二.Centos下安装jdk1.yum 安装1.6版本jdk2 ...

  6. http安全篇

    一.app与服务端交互确保来源的安全 作为一个移动互联网App,天生是需要和服务器通信的.那么,服务器如何识别客户端的身份?我们如何保证数据传输过程中的安全性?要靠两个东西:使用AppKey做身份识别 ...

  7. [daily][CentOS][yum] 删除包的同时一同清理掉安装时一起装进来的依赖包

    说起来有点绕口,这个需求是这样的. 就是我yum装A包的时候,同时安装了A的依赖包a1,a2,a3. 当我们使用yum remove A卸载A包的是,a1,a2,a3包并不会一同被卸载掉.如果他们没有 ...

  8. Selinux在HTTP＋PHP服务中的安全权限修改

    在PHP用使用fopen的写入功能实,常会遇到诸如: PHP Warning:  fopen(file): failed to open stream: Permission denied in (f ...

  9. Git and Xcode

    1.web site "New Repository" 2.为本地 git 管理的项目添加 Repository $ cd ~/ProjectName$ git remote ad ...

  10. docker kubernetes--

    http://kubernetes.io/docs/getting-started-guides/docker/ https://hub.docker.com/r/solsson/hyperkube- ...