h5+css3
html5+css3一直是web開發(fā)的熱點(diǎn)，作為一個PHP工程師的我也很喜歡這個領(lǐng)域，自1999年以后HTML 4.01 已經(jīng)改變了很多，今天，在HTML 4.01中的幾個已經(jīng)被廢棄，這些元素在HTML5中已經(jīng)被刪除或重新定義。
為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用，HTML5添加了很多新元素及功能，比如： 圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式 處理，和幾個api拖放元素，定位，包括網(wǎng)頁 應(yīng)用程序緩存，存儲，網(wǎng)絡(luò)工作者等。
canvas介紹
canvas是我們這篇文章的主角
| 標(biāo)簽 | 描述 |
|---|---|
| <canvas> | 標(biāo)簽定義圖形，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API |
具體的html5用法可以參照這個手冊慢慢研究，我也是剛剛開始關(guān)注這個領(lǐng)域發(fā)現(xiàn)很有用，在圖像的處理上堪稱完美html5教程
簡單實(shí)踐
學(xué)了就像做出點(diǎn)什么，模擬個樹的生長
這是效果截圖
樹
先上代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree</title>
</head>
<body>
<canvas id='d1' width="600" height="500" style="border:dashed 2px #ccc;"></canvas>
<script>
var drawtree = function (ctx,startx,starty,length,angle,depth,branchWidth){
var rand=Math.random,
n_length,n_angle,n_depth,maxbranch=4,
endx,endy,maxangle=2 * Math.PI / 4;
var subbranch;
ctx.beginPath();
ctx.moveTo(startx,starty);
endx=startx + length * Math.cos(angle);
endy=starty + length * Math.sin(angle);
ctx.lineCap='round';
ctx.lineWidth=branchWidth;
ctx.lineTo(endx,endy);
if(depth<=2 ){
//樹的枝干
ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +128) >>0) + ',0)';
}
else{
//樹的葉子
ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +64) >>0) + ',50,25)';
}
ctx.stroke();
n_depth = depth-1;
//判斷樹是否結(jié)束
if(!n_depth){
return;
}
subbranch= (rand() * (maxbranch-1)) + 1;
branchWidth *=0.5;
for(var i=0;i<subbranch;i++){
n_angle = angle +rand() * maxangle -maxangle *0.5;
n_length = length * (0.5 + rand() *0.5);
setTimeout(function (){
drawtree(ctx,endx,endy,n_length,n_angle,n_depth,branchWidth);
return;
},500)
}
}
var canvas=document.getElementById('d1');
var ctx= canvas.getContext('2d');
//初始化的樹
drawtree(ctx,300,470,100,-Math.PI / 2, 12, 12);
</script>
</body>
</html>
效果還不錯吧，但代碼并不長，就喜歡這種東西，哈哈哈~
基本想法就是用黑色的line來模擬樹枝，綠色的line來模擬樹葉，然后使用setTimeout來產(chǎn)生個動畫，每畫出一條就以這個為起點(diǎn)來生成其他的分支，直到深度達(dá)到設(shè)定值停止。
