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. Android开发的七大环节

    Android开发的七大环节   浏览:25 发布日期:2015/10/27 分类:职场感悟 一个完整的Android 开发流程主要包括策划.软件.交互.视觉.测试.运营维护这七大环节,其中的每一个环 ...

  2. P1018 乘积最大

    开始定义状态f[i][j][k]为[i,j)区间插入k个括号,使用记忆化搜索,但是成功爆栈,得到4个mle #include <bits/stdc++.h> using namespace ...

  3. pro5

    1.本次课学到的知识点 (1)循环结构的概念 在我们需要重复进行某个步骤是就需要运用到循环结构. (2)三种循环语句 for,while,do-while是三种常用的循环语句,其中while的适用范围 ...

  4. BLE GATT规范中关于UUID与属性的详细解析

    1. 角色 除了GAP定义了角色之外,BLE还定义了另外2种角色:GATT服务器和GATT客户端,它们完全独立于GAP的角色.提供数据的设备称为GATT服务器,访问GATT服务器而获得数据的设备称为G ...

  5. GCD的简单介绍

    一)GCD 的使用方式 dispatch_async(dispatch_queue_t queue, dispatch_block_t block); async表明运行方式 queue则是你把任务交 ...

  6. python 输出乱码

    在Python中有两种默认的字符串:str和unicode.在Python中一定要注意区分“Unicode字符串”和“unicode对象”的区别.后面所有的“unicode字符串”指的都是python ...

  7. Python基本数据类型之list列表

    列表是python中用的非常频繁的数据结构,它是有序序列.之前学的字符串就是一种有序序列.不过列表是可变的. 创建列表 li = list( )                          #构 ...

  8. 使用node.js的bodyParser中间件读取post数据解析

    昨天我们使用的网关转发数据时出了点问题! 情景是这样的,另一方以Post的形式向我的node.js服务推送JSON数据.但是使用bodyParser中间件后,在req.body中拿不到任何信息. 代码 ...

  9. js中将字符串转换成json的三种方式

    1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...

  10. JavaScript正则表达式（三）

    正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档中使用一个正则表达式 ...