植树 « CSSASS

植树
作者：Neoxone 发表时间： 2011年01月21号，星期五阅读：3,851 次

在闪吧看见一棵树，移植到canvas+javascript里来。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Tree</title>
</head>
<body>
<canvas id="pad" width='1000' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie9以下用户请一边惭愧去吧</canvas>
</body>
<script>
var con=document.getElementById("pad").getContext('2d');
	con.strokeStyle = '#000';
	con.lineWidth=0.8;
function dw(ax, ay, bx, by) {
	con.beginPath()
	con.moveTo(ax, ay);
	con.lineTo(bx, by);
	con.stroke();
}
function lzh(x, y, l, angle, n) {
	if (n>0) {
		var a_l, a_r, x1, y1, x2, y2, y2_l;
		x1 = x+0.5*l*Math.cos(angle*Math.PI/180);
		y1 = y-0.5*l*Math.sin(angle*Math.PI/180);
		x2 = x+l*Math.cos(angle*Math.PI/180);
		y2 = y-l*Math.sin(angle*Math.PI/180);
		dw(x, y, x2, y2);
		a_l = angle+30;
		a_r = angle-30;
		l=l*2/3
		lzh(x2, y2, l, angle+rand, n-1);
		lzh(x1, y1, l*2/3, a_l+rand/2, n-1);
		lzh(x1, y1, l*2/3, a_r+rand/2, n-1);
		lzh(x2, y2, l*2/3, a_l+rand/2, n-1);
		lzh(x2, y2, l*2/3, a_r+rand/2, n-1);
		}
	}
var rand=2-Math.random()*10
lzh(300, 400, 100, 90, 6);
</script>
</html>

用setInterval让它动起来

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Tree</title>
</head>
<body>
<canvas id="pad" width='1000' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie9以下用户请一边惭愧去吧</canvas>
</body>
<script>
var con=document.getElementById("pad").getContext('2d');
    con.strokeStyle = '#000';
    con.lineWidth=0.8;
var Tree=function(x, y, l, angle, n){
    var a=[],rand=0,dir=1,val;
    this.init=function(x, y, l, angle, n) {
        var that=this;
        if (n>0) {
            var a_l, a_r, x1, y1, x2, y2;
            x1 = x+0.5*l*Math.cos(angle*Math.PI/180);
            y1 = y-0.5*l*Math.sin(angle*Math.PI/180);
            x2 = x+l*Math.cos(angle*Math.PI/180);
            y2 = y-l*Math.sin(angle*Math.PI/180);
            a.push([x, y, x2, y2]);
            a_l = angle+30;
            a_r = angle-30;
            l=l*2/3;
            that.init(x2, y2, l, angle+rand, n-1);
            that.init(x1, y1, l*2/3, a_l+rand/2, n-1);
            that.init(x1, y1, l*2/3, a_r+rand/2, n-1);
            that.init(x2, y2, l*2/3, a_l+rand/2, n-1);
            that.init(x2, y2, l*2/3, a_r+rand/2, n-1);
         };
    };
    this.run=function(){
		con.clearRect(0,0,1000,500);
        for(var i=0; i<a.length; i++){
            this.dw(a[i][0],a[i][1],a[i][2],a[i][3]);
        };
		a=[];
    };
	this.move=function(){
		var that = this;
		var _s=function(){
			that.change();
			that.init(x, y, l, angle, n);
			that.run();
			setTimeout(_s,100);
		};
		_s();
	};
	this.change=function(){
		val=Math.random()*2;
		rand+=dir*val;
		if(rand>10 || rand<-2){dir=-dir;}
	};
	this.init(x, y, l, angle, n);
	this.run();
};
Tree.prototype.dw=function(ax, ay, bx, by){
    con.beginPath()
    con.moveTo(ax, ay);
    con.lineTo(bx, by);
    con.stroke();
};
new Tree(300, 400, 100, 90, 6).move();
</script>
</html>

补充：
除了setTimeout/setInterval这两个函数控制动画外。现在很多浏览器还提供了另一个函数requestAnimationFrame，这个函数接口所拥有的优势是：

对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。
如果发生动画的元素被隐藏了，那么就不再去Paint。

不过这个方法的使用只类似于递归调用，并没有一个时间停顿，所以我们一般要根据记录时间间隔来决定动画的每一帧的绘制情况。
下面用requestAnimationFrame来完成上面的动画。由于requestAnimationFrame的兼容性，我们需要先写一个兼容性的方法（来自three.js）：

(function() {
/* 兼容requestAnimationFrame */
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'RequestCancelAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Tree</title>
</head>
<body>
<canvas id="pad" width='1000' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie9以下用户请一边惭愧去吧</canvas>
</body>
<script>
(function() {
	/* 兼容requestAnimationFrame */
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'RequestCancelAnimationFrame'];
    }
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
var con = document.getElementById("pad").getContext('2d');
    con.strokeStyle = '#000';
    con.lineWidth=0.8;
var Tree = function(x, y, l, angle, n){
    var a=[],rand=0,dir=1,val;
    this.init = function(x, y, l, angle, n) {
        var that = this;
        if (n>0) {
            var a_l, a_r, x1, y1, x2, y2;
            x1 = x+0.5*l*Math.cos(angle*Math.PI/180);
            y1 = y-0.5*l*Math.sin(angle*Math.PI/180);
            x2 = x+l*Math.cos(angle*Math.PI/180);
            y2 = y-l*Math.sin(angle*Math.PI/180);
            a.push([x, y, x2, y2]);
            a_l = angle+30;
            a_r = angle-30;
            l=l*2/3;
            that.init(x2, y2, l, angle+rand, n-1);
            that.init(x1, y1, l*2/3, a_l+rand/2, n-1);
            that.init(x1, y1, l*2/3, a_r+rand/2, n-1);
            that.init(x2, y2, l*2/3, a_l+rand/2, n-1);
            that.init(x2, y2, l*2/3, a_r+rand/2, n-1);
         };
    };
    this.run=function(){
		con.clearRect(0,0,1000,500);
        for(var i=0; i<a.length; i++){
            this.dw(a[i][0],a[i][1],a[i][2],a[i][3]);
        };
		a=[];
    };
	this.move = function(){
		var that = this;
		var start = new Date().getTime(),
			delta;
		(function _s(){
			delta = new Date().getTime() - start;
			if( delta > 100 ){
				start = new Date().getTime();
				that.change();
				that.init(x, y, l, angle, n);
				that.run();
			}
			return requestAnimationFrame(_s)
		})();
	};
	this.change=function(){
		val = Math.random()*2;
		rand += dir*val;
		if (rand >10 || rand < -2){ dir = -dir; }
	};
	this.init(x, y, l, angle, n);
	this.run();
};
Tree.prototype.dw=function(ax, ay, bx, by){
    con.beginPath()
    con.moveTo(ax, ay);
    con.lineTo(bx, by);
    con.stroke();
};
new Tree(300, 400, 100, 90, 6).move();
</script>
</html>

标签： canvas, requestAnimationFrame

这篇文章发布于 2011年01月21号，星期五，17:04，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

植树
作者：Neoxone 发表时间： 2011年01月21号，星期五阅读：3,851 次

相关文章:

留下回复

植树作者：Neoxone 发表时间： 2011年01月21号，星期五 阅读：3,851 次

相关文章:

留下回复

植树
作者：Neoxone 发表时间： 2011年01月21号，星期五阅读：3,851 次