html5植物生长效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5植物生长效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html5ֲ������Ч��</title>
</head>
<link href="zzsc.css" rel="stylesheet" type="text/css" />
<script src="zzsc.js" type="text/javascript"></script>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

JS代码(zzsc.js):

window.onload = function(){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	//Lets resize the canvas to occupy the full pagevar W = window.innerWidth;
	var H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	//Some variablesvar length,divergence,reduction,line_width,start_points = [];
	init();
	function init(){
	//filling the canvas whitectx.fillStyle = "white";
	ctx.fillRect(0,0,W,H);
	//Lets draw the trunk of the tree//lets randomise the variables//length of the trunk - 100-150length = 100 + Math.round(Math.random()*50);
	//angle at which branches will diverge - 10-60divergence = 10 + Math.round(Math.random()*50);
	//Every branch will be 0.75times of the previous one - 0.5-0.75//with 2 decimal pointsreduction = Math.round(50 + Math.random()*20)/100;
	//width of the branch/trunkline_width = 10;
	//This is the end point of the trunk,from where branches will divergevar trunk ={
	x:W/2,y:length+50,angle:90}
;
	//It becomes the start point for branchesstart_points = [];
	//empty the start points on every init();
	start_points.push(trunk);
	//Y coordinates go positive downwards,hence they are inverted by deducting it//from the canvas height = Hctx.beginPath();
	ctx.moveTo(trunk.x,H-50);
	ctx.lineTo(trunk.x,H-trunk.y);
	ctx.strokeStyle = "brown";
	ctx.lineWidth = line_width;
	ctx.stroke();
	branches();
}
//Lets draw the branches nowfunction branches(){
	//reducing line_width and lengthlength = length * reduction;
	line_width = line_width * reduction;
	ctx.lineWidth = line_width;
	var new_start_points = [];
	ctx.beginPath();
	for(var i = 0;
	i < start_points.length;
	i++){
	var sp = start_points[i];
	//2 branches will come out of every start point. Hence there will be//2 end points. There is a difference in the divergence.var ep1 = get_endpoint(sp.x,sp.y,sp.angle+divergence,length);
	var ep2 = get_endpoint(sp.x,sp.y,sp.angle-divergence,length);
	//drawing the branches nowctx.moveTo(sp.x,H-sp.y);
	ctx.lineTo(ep1.x,H-ep1.y);
	ctx.moveTo(sp.x,H-sp.y);
	ctx.lineTo(ep2.x,H-ep2.y);
	//Time to make this function recursive to draw more branchesep1.angle = sp.angle+divergence;
	ep2.angle = sp.angle-divergence;
	new_start_points.push(ep1);
	new_start_points.push(ep2);
}
//Lets add some more colorif(length < 10) ctx.strokeStyle = "green";
	else ctx.strokeStyle = "brown";
	ctx.stroke();
	start_points = new_start_points;
	//recursive call - only if length is more than 2.//Else it will fall in an long loopif(length > 2) setTimeout(branches,50);
	else setTimeout(init,500);
}
function get_endpoint(x,y,a,length){
	//This function will calculate the end points based on simple vectors//http://physics.about.com/od/mathematics/a/VectorMath.htm//You can read about basic vectors from this linkvar epx = x + length * Math.cos(a*Math.PI/180);
	var epy = y + length * Math.sin(a*Math.PI/180);
	return{
	x:epx,y:epy}
;
}
}

CSS代码(zzsc.css):

/*Some basic CSS*/
*{margin:0;padding:0;}
/*To remove the scrollers*/
#canvas{display:block;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

1.95 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

1.95 KB

立即下载

廖环菁娟

了解

打赏作者鼓励作者

html5特效