您的位置：首页 > 其它

canvas学习之圆周运动

2015-08-11 18:42 429 查看

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>

上图，矩形做圆周运动。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航