web前端入門(mén)到實(shí)戰(zhàn)：html5canvas模擬實(shí)現(xiàn)樹(shù)的生長(zhǎng)

h6+css3

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)商水,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108

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

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

canvas介紹

canvas是我們這篇文章的主角

標(biāo)簽	描述
<canvas>	標(biāo)簽定義圖形，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API

簡(jiǎn)單實(shí)踐

學(xué)了就像做出點(diǎn)什么，模擬個(gè)樹(shù)的生長(zhǎng)
這是效果截圖

web前端入門(mén)到實(shí)戰(zhàn)：html5 canvas模擬實(shí)現(xiàn)樹(shù)的生長(zhǎng)

樹(shù)

先上代碼

<!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 ){
            //樹(shù)的枝干
            ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +128) >>0) + ',0)';
        }
        else{
            //樹(shù)的葉子
            ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +64) >>0) + ',50,25)';
        }
        ctx.stroke();
        n_depth = depth-1;
        //判斷樹(shù)是否結(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');
    //初始化的樹(shù)
    drawtree(ctx,300,470,100,-Math.PI / 2, 12, 12);
    </script>
</body>
</html>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）

效果還不錯(cuò)吧，但代碼并不長(zhǎng)
基本想法就是用黑色的line來(lái)模擬樹(shù)枝，綠色的line來(lái)模擬樹(shù)葉，然后使用setTimeout來(lái)產(chǎn)生個(gè)動(dòng)畫(huà)，每畫(huà)出一條就以這個(gè)為起點(diǎn)來(lái)生成其他的分支，直到深度達(dá)到設(shè)定值停止。

當(dāng)前題目：web前端入門(mén)到實(shí)戰(zhàn)：html5canvas模擬實(shí)現(xiàn)樹(shù)的生長(zhǎng)
分享路徑：http://bm7419.com/article4/gipdoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、用戶(hù)體驗(yàn)、App開(kāi)發(fā)、微信公眾號(hào)、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容