溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

web前端入門到實戰(zhàn)：html5 canvas模擬實現(xiàn)樹的生長

發(fā)布時間：2020-05-28 01:44:37 來源：網絡 閱讀：433 作者：前端向南 欄目：web開發(fā)

h6+css3

html5+css3一直是web開發(fā)的熱點，自1999年以后HTML 4.01 已經改變了很多，今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。

為了更好地處理今天的互聯(lián)網應用，HTML5添加了很多新元素及功能，比如： 圖形的繪制，多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程序緩存，存儲，網絡工作者等。

canvas介紹

canvas是我們這篇文章的主角

標簽 描述
<canvas> 標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API
簡單實踐

學了就像做出點什么，模擬個樹的生長
這是效果截圖

web前端入門到實戰(zhàn)：html5 canvas模擬實現(xiàn)樹的生長

樹

先上代碼
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
</head>
<body>
    <canvas id='d1' width="600" height="500" ></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>
web前端開發(fā)學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰(zhàn)教程，學習工具，職業(yè)規(guī)劃）

效果還不錯吧，但代碼并不長
基本想法就是用黑色的line來模擬樹枝，綠色的line來模擬樹葉，然后使用setTimeout來產生個動畫，每畫出一條就以這個為起點來生成其他的分支，直到深度達到設定值停止。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手