html5实现随机圆形的加速运动

最新推荐文章于 2021-06-25 06:48:18 发布

原创最新推荐文章于 2021-06-25 06:48:18 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5 #动画

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一段使用HTML5 canvas编写的动画代码，该动画展示随机大小和位置的圆饼在屏幕上以随机初速度和加速度运动。当速度达到一定值后，圆饼速度保持恒定。此外，提供了包含html、css和js文件的简单工程结构，便于理解和学习。

最近处于毕业到工作之间的gap month，终于有时间能学点自己喜欢的东西了。很早就想学html5了，希望不久以后能用canvas编出个游戏。

以下代码是最近在学习html5中写的，是一个用canvas实现的动画，随机大小，随机位置的圆饼在屏幕上以随机的初速度和随机的加速度运动。

当然，速度达到一定值后就保持恒定了。

左下角有一个按钮，点击play即开始演示

工程包括三个文件，一个html，一个css，一个js，应该都很好理解：

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<canvas id="myCanvas">Your browser does not support html5 canvas</canvas>
<button id="toggleBtn" style="bottom:20px; left:20px; position:absolute;">play</button>
<script type="text/javascript" src="asteroids.js" ></script>
</body>
</html>

asteroids.js

// JavaScript Document
var animationPlay = false;
var shape = function( x, y, vX, vY, aX, aY, radius, style )
{
	this.x = x;
	this.y = y;
	this.radius = radius;
	this.style = style;
	this.vX = vX;
	this.vY = vY;
	this.aX = aX;
	this.aY = aY;
}

var shapes = new Array();
var canvasWidth, canvasHeight;
var timer;

function btnClick()
{
	if( animationPlay )
	{
		animationPlay = false;
		this.innerHTML = "play";
	}
	else
	{
		animationPlay = true;
		this.innerHTML = "pause";
		AnimationDemo(); 
	}
}

function init()
{
	if(animationPlay)
	{
		clearTimeout(timer);
		animationPlay = false;
	//	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}
	
	var btn = document.getElementById("toggleBtn");
	btn.onclick = btnClick;
	
	var canvas = document.getElementById("myCanvas");
	canvasHeight = canvas.height = window.innerHeight;
	canvasWidth = canvas.width = window.innerWidth;
	
	shapes = [];//clear the shapes array.
//	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
	btn.innerHTML = "play";
	
	for( var i = 0; i < 10; i++ )
	{
		var x = 20 + Math.random()*(canvasWidth-40);
		var y = 20 + Math.random()*(canvasHeight-40);
		var radius = 20 + Math.random()*20;

		//random color
		var r = Math.floor(Math.random()*255);
		var g = Math.floor(Math.random()*255);
		var b = Math.floor(Math.random()*255);
		var style = '#' + r.toString(16) + g.toString(16) + b.toString(16);
		//random velocity
		var vX = Math.random()*4-2;
		var vY = Math.random()*4-2;
		//random acceleration
		var aX = Math.random()*0.2-0.1;
		var aY = Math.random()*0.2-0.1;
		shapes.push( new shape(x, y, vX, vY, aX, aY, radius, style ));
	}
}

function BorderDetect( tempShape )
{
	if( tempShape.x - tempShape.radius < 0 )
	{
		tempShape.x = tempShape.radius;
		tempShape.vX *= -1; 
		tempShape.aX *= -1;
	}
	else if( tempShape.x + tempShape.radius > canvasWidth )
	{
		tempShape.x = canvasWidth - tempShape.radius;
		tempShape.vX *= -1;
		tempShape.aX *= -1;
	}
	if( tempShape.y - tempShape.radius < 0 )
	{
		tempShape.y = tempShape.radius;
		tempShape.vY *= -1; 
		tempShape.aY *= -1;
	}
	else if( tempShape.y + tempShape.radius > canvasHeight )
	{
		tempShape.y = canvasHeight - tempShape.radius;
		tempShape.vY *= -1;
		tempShape.aY *= -1;
	}
	return tempShape;		
}

function AnimationDemo()
{
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	
	ctx.clearRect(0, 0, canvas.width, canvas.height );
	for( var i = 0; i < shapes.length; i++ )
	{
		var tempShape = shapes[i];
		
		//detect the border
		tempShape = BorderDetect( tempShape );
		
		tempShape.x += tempShape.vX;
		tempShape.y += tempShape.vY;
		if( Math.abs(tempShape.vX)<10 )	tempShape.vX += tempShape.aX;
		if( Math.abs(tempShape.vY)<10 ) tempShape.vY += tempShape.aY;
		ctx.fillStyle = tempShape.style;
		
		ctx.beginPath();
		ctx.arc( tempShape.x, tempShape.y, tempShape.radius, 0, Math.PI*2, false );//draw a circle
		ctx.closePath();
		ctx.fill();	
	}
	if( animationPlay )
		timer = setTimeout( AnimationDemo, 33 );
}

window.addEventListener("load", init, true );
window.addEventListener("resize",init, true );//窗口大小变化时

style.css

@charset "utf-8";
/* CSS Document */

body, html {
	height: 100%;
	width: 100%;
}

canvas {
	display:block;
}

*{
	margin:0;
	padding:0;
}

#myCanvas {
	background:#001022;
}