html5 canvas模擬實現樹的生長

阿新 • • 發佈：2019-02-20

h5+css3

html5+css3一直是web開發的熱點，作為一個PHP工程師的我也很喜歡這個領域，自1999年以後HTML 4.01 已經改變了很多，今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。
為了更好地處理今天的網際網路應用，HTML5添加了很多新元素及功能，比如：圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個api拖放元素，定位，包括網頁應用程式快取，儲存，網路工作者等。

canvas介紹

標籤

<canvas>

描述

標籤定義圖形，比如圖表和其他影象。該標籤基於 JavaScript 的繪圖 API

簡單實踐

模擬個樹的生長，這是效果截圖

這裡寫圖片描述

程式碼

<!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;
        //判斷樹是否結束
        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來產生個動畫，每畫出一條就以這個為起點來生成其他的分支，直到深度達到設定值停止。

更多前端大型專案實戰操作視訊加入前端交流學習群：731771211

小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學視訊）

歡迎新手，進階的小夥伴！點選：學習

html5 canvas模擬實現樹的生長

html5 canvas模擬實現樹的生長

HTML5 CSS3 誘人的例項 canvas 模擬實現電子彩票刮刮樂

PS學習記錄6--html5 canvas+js實現ps鋼筆摳圖

[SoOnPerson] HTML5 Canvas 模擬時鐘

HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）

純JavaScript實現HTML5 Canvas六種特效濾鏡

Html5 Canvas動畫基礎碰撞檢測的實現

HTML5 canvas 240行程式碼實現粒子漩渦特效

HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳（二）

基於HTML5 Canvas和jQuery的畫圖工具的實現

基於HTML5 Canvas 實現彈出框

利用python模擬分形生長樹

HTML5 Canvas 繪製橢圓與橢圓弧的實現

html5 canvas拓展clearRect()實現圓形區域清理

Html5 Canvas 實現兩張圖片合成

HTML5 canvas實現圖片拉伸、壓縮與裁剪

詳述用html5 canvas實現的類似於天貓的購物進度反饋/訂單跟蹤

HTML5+canvas實現圖片的壓縮上傳

基於 HTML5 Canvas 實現的文字動畫特效

html5＜canvas模擬三維圖形＞（旋轉的正方體）

html5 canvas模擬實現樹的生長

相關推薦