canvas小球動畫原理

時間 2019-12-02

標籤 canvas 小球動畫原理简体版

原文原文鏈接

隨着html5發展，canvas標籤做爲h5革命性的發展標誌也愈來愈流行。canvas標籤的強大之處，不只在於它能夠做爲一個獨立的畫布，也能夠利用canvas作一些動畫而不用導入flash文件。同時，canvas還能夠一些遊戲、商城商品圖片放大器功能等等。javascript

這篇博客先寫一些簡單動畫，同時描述一下原理。php

首先，canvas標籤不是一個獨立的部分，它是要以js代碼輔助而成的一個模塊，因此js代碼對其尤其重要。html

body中寫入canvas標籤：html5

<canvas id="canvas" width="750" height="500"></canvas>
<input type="button"  id="animatebutton" value="animate" />   //控制小球的運動與暫停

直接上js代碼：java

canvas的js開頭都是固定的：canvas

var canvas = document.getElementById('canvas'),
cx= canvas.getContext('2d'),
paused = true ,//設置小球加載完成是否暫停，如今加載完成小球不動。

加載三個小球的數據：函數

discs = [
		{
			x:150,
			y:250,
			velocityx:-3.2,      //小球橫向運動速度
			velocityy:3.5,       //小球縱向運動速度
			radius:25,　　　　　　　　//小球半徑
			strokestyle:'gray',     //小球填充顏色
		},
		{
			x:50,
			y:150,
			velocityx:2.2,
			velocityy:2.5,
			radius:25,
			strokestyle:'blue',
		},
		{
			x:150,
			y:75,
			velocityx:1.2,
			velocityy:1.5,
			radius:25,
			strokestyle:'orange',
		},
		],

定義小球的數量以及找到控制小球暫停的button動畫

numdiscs = discs.length, //小球數量
animatebutton = document.getElementById('animatebutton');
// 小球暫停開始按鈕

用canvas畫出小球：spa

function draw(){
		var disc = discs[i];    //小球的索引
		for(var i=0;i<numdiscs;i++)
		{
			disc = discs[i];
			cx.save();                   
			cx.beginPath();
			cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
			cx.fillStyle=disc.strokestyle;    //小球填充色
			cx.fill();
			cx.restore();
			}
		}

設置碰撞及小球運動函數：3d

function update(){
		var disc = null;
		for(var i=0;i<numdiscs;i++)
		{
			disc = discs[i];
			if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)      //小球橫向撞牆後朝相反方向運動
			disc.velocityx = -disc.velocityx;
			if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)   //小球縱向向撞牆後朝相反方向運動
			disc.velocityy = -disc.velocityy;
			disc.x+=disc.velocityx;    //每次循環小球橫向運動距離
			disc.y+=disc.velocityy;　　//每次循環小球縱向運動距離

} }

設置小球的運動，這是一個循環函數，當按鈕點擊運動的時候，小球每隔一點時間循環運動，其中

window.requestAnimationFrame()函數是canvas標籤中特有的，這個函數能夠根據最佳流暢性自動選擇循環一次的時間。

function animate(){
		if(!paused){
		cx.clearRect(0,0,canvas.width,canvas.height);
		update();
		draw();
		window.requestAnimationFrame(animate);
			}
		}

運行以上函數：

animatebutton.onclick = function (){               
		paused = paused? false:true;
		if(paused){                        //點擊按鈕後，按鈕文字改變
		animatebutton.value = "animate";		
		}
		else{
			window.requestAnimationFrame(animate);
			animatebutton.value = "pause";      //點擊按鈕後，按鈕文字改變
			}
		}

代碼整合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	<input type="button"  id="animatebutton" value="animate" />
	<canvas id="canvas" width="750" height="500"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas'),
		cx= canvas.getContext('2d'),
		paused = true ,
		discs = [
		{
			x:150,
			y:250,
			velocityx:-3.2,
			velocityy:3.5,
			radius:25,
			strokestyle:'gray',
		},
		{
			x:50,
			y:150,
			velocityx:2.2,
			velocityy:2.5,
			radius:25,
			strokestyle:'blue',
		},
		{
			x:150,
			y:75,
			velocityx:1.2,
			velocityy:1.5,
			radius:25,
			strokestyle:'orange',
		},
		],

		numdiscs = discs.length,
		animatebutton = document.getElementById('animatebutton');
		
		function update(){
			var disc = null;
			for(var i=0;i<numdiscs;i++)
			{
				disc = discs[i];
				if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)
				disc.velocityx = -disc.velocityx;
				if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)
				disc.velocityy = -disc.velocityy;
				disc.x+=disc.velocityx;
				disc.y+=disc.velocityy;
			}
		}
		
		function draw(){
			var disc = discs[i];
			for(var i=0;i<numdiscs;i++)
			{
				disc = discs[i];
				
				cx.save();
				cx.beginPath();
				cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
				cx.fillStyle=disc.strokestyle;
				cx.fill();
				//cx.stroke();
				cx.restore();
			}
		}
		function animate(){
			if(!paused){
				cx.clearRect(0,0,canvas.width,canvas.height);
				
				update();
				draw();
				window.requestAnimationFrame(animate);
			}
		}
		
		animatebutton.onclick = function (){
			paused = paused? false:true;
			if(paused){
				animatebutton.value = "animate";
				
			}
			else{
				window.requestAnimationFrame(animate);
				animatebutton.value = "pause";
			}
		}
	</script>
</html>

效果：

沒有點擊運動前：

點擊運動後：

小球是一直運動的，點擊pause以後，小球運動暫停。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。