html5 キャンバスは木の成長をシミュレート_html/css

html5 キャンバスは木の成長をシミュレート_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:38

オリジナル

1560 人が閲覧しました

h5+css3

html5+css3 は、PHP エンジニアとして、1999 年以来大きく変化したこの分野も気に入っています。 . 現在、いくつかの要素は HTML 4.01 で非推奨となり、これらの要素は HTML5 で削除または再定義されています。今日のインターネットアプリケーションをより適切に処理するために、HTML5 には、グラフィック描画、マルチメディアコンテンツ、より優れたページ構造、より優れたフォーム処理、いくつかの API ドラッグアンドドロップ要素、位置決め、Web アプリケーションキャッシュ、ストレージなど、多くの新しい要素と機能が追加されています。、ネットワークワーカーなど。

キャンバスの概要

キャンバスは記事の主役です

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

HTML5 の具体的な使用方法については、を参照してください。このマニュアルをゆっくりと勉強して、この分野に注目し始めましたが、これは画像処理のための完璧な HTML5 チュートリアルです

簡単な練習です

学習後は、何かを作成し、木の成長をシミュレートするようなものです。これはエフェクトのスクリーンショットです。

Tree

最初のコードです。

<!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>

ログイン後にコピー

効果は悪くありませんが、コードは長くありません、私はこの種のことが好きです、ははは~ 基本的なアイデアは、黒い線を使用して枝をシミュレートし、緑の線を使用してシミュレートすることです葉を作成し、setTimeout を使用してアニメーションを生成します。描画するたびに、1 つのブランチがこれを開始点として使用し、深さが設定値に達するまで他のブランチを生成します。