利用webgl随机生成N个方块，并在画布内来回移动，遇到边界可以弹回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画制作</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
function rectBlack() {
context.fillStyle = "rgb(0,0,0)";
context.fillRect(0,0,canvasWidth,canvasHeight);
}
rectBlack();
function rectRed(x,y,width,height) {
context.fillStyle = "rgb(255,0,0)";
context.fillRect(x,y,width,height);
}
var playAnimation = true;
var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
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,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.reverseX = false;
this.reverseY = false;
}
var shapes = new Array();
for(var i = 0;i<10;i++){
var x = Math.random()*1000;
var y = Math.random()*800;
var width = height = Math.random()*50;
shapes.push( new Shape(x,y,width,height));
}
function animate() {
if(playAnimation){
setTimeout(animate,100);
}
rectBlack();
var shapesLength = shapes.length;
for (var i=0;i<shapesLength;i++){
var tmpShape = shapes[i];
rectRed(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height);
if(!tmpShape.reverseX){
tmpShape.x=tmpShape.x+Math.random()*10;
}else{
tmpShape.x=tmpShape.x-Math.random()*10;
}
if(!tmpShape.reverseY){
tmpShape.y=tmpShape.y+Math.random()*10;
}else{
tmpShape.y=tmpShape.y-Math.random()*10;
}
if(tmpShape.x<0){
tmpShape.reverseX = false;
}else if(tmpShape.x+tmpShape.width>canvasWidth){
tmpShape.reverseX = true;
};
if(tmpShape.y<0){
tmpShape.reverseY = false;
}else if(tmpShape.y+tmpShape.height>canvasHeight){
tmpShape.reverseY = true;
};
}
}
animate();
});
</script>
</head>
<body>
<canvas>
</canvas>
<div>
<button>开始</button>
<button>暂停</button>
</div>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
