java代码画樱花_樱花的季节，教大家用CANVAS画出飞舞的樱花树

又到了樱花的季节，教大家使用canvas画出飞舞的樱花树效果。

废话少说，先看效果。

演示效果地址：http://suohb.com/work/tree4.htm

第一步，我们先画出一棵树的主体。

我画树的使用的原理是，定义一个起始点，从这个点开始，向一个角度移动一段距离。得到另一个点。

画出一条线连接两个点。

以新得到的点，依旧向这个角度，移动一段距离。得到第三个点，连写第二第三个点。

以此类推。一定步长之后，就得到一条射线。

我们根据自然界中的真实树的情况，这条线越来越细，直到最细地方结束。

var treeCanvas = document.getElementById("tree");

treeCanvas.width = window.innerWidth;

treeCanvas.height = window.innerHeight ;

var tCxt = treeCanvas.getContext("2d");

var rootTop = 450 ;//树起始位置

var treeColor = "#FFF" ;//树颜色

function drawTree(x,y,deg,step){

var x1 = x + Math.cos(deg) * step ;//越细的枝干越短，所以以步长来做

var y1 = y + Math.sin(deg) * step ;

tCxt.beginPath();

tCxt.lineWidth = step/3;//树干越来越细

tCxt.moveTo(x,y);

tCxt.lineTo(x1,y1);

tCxt.strokeStyle = treeColor ;

tCxt.stroke();

step -- ;

if(step > 0){

drawTree(x1,y1,deg,step);

}

}

drawTree(treeCanvas.width/2,rootTop,-Math.PI/2,30);

树干出来之后，要做分叉