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学习之圆周运动
关键词：
我知道了 