web前端入門到實(shí)戰(zhàn)：html5canvas模擬實(shí)現(xiàn)樹的生長-創(chuàng)新互聯(lián)

h6+css3

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

html5+css3一直是web開發(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)容，更好的頁面結(jié)構(gòu)，更好的形式處理，和幾個(gè)api拖放元素，定位，包括網(wǎng)頁應(yīng)用程序緩存，存儲(chǔ)，網(wǎng)絡(luò)工作者等。

canvas介紹

canvas是我們這篇文章的主角

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

簡單實(shí)踐

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

web前端入門到實(shí)戰(zhàn)：html5 canvas模擬實(shí)現(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;
        //判斷樹是否結(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>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：web前端入門到實(shí)戰(zhàn)：html5canvas模擬實(shí)現(xiàn)樹的生長-創(chuàng)新互聯(lián)
文章分享：http://www.rwnh.cn/article18/dhhcgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、面包屑導(dǎo)航、做網(wǎng)站

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

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

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

web前端入門到實(shí)戰(zhàn)：html5canvas模擬實(shí)現(xiàn)樹的生長-創(chuàng)新互聯(lián)

canvas介紹

簡單實(shí)踐

先上代碼