使用Javascript 運用「遞歸」繪制「一棵樹」

使用Javascript 運用「遞歸」繪制「一棵樹」的示例

anvas是HTML5中的一個重要特性，它是一個可以使用JavaScript繪制圖形的HTML元素。本文將分為以下幾個部分：

準備工作
繪制背景
繪制樹
完整代碼

接下來，我們將逐一詳細講解。

1. 準備工作

首先，我們需要在HTML文檔中添加一個Canvas元素，并設置它的寬度和高度。代碼如下：

<canvas id="canvas" width="800" height="600"></canvas>

接下來，我們需要在JavaScript中獲取這個Canvas元素，并獲取它的繪圖上下文。代碼如下：

const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');

2. 繪制背景

在繪制樹之前，我們需要先繪制一個背景。這里我們使用Canvas的漸變函數來實現一個漸變色的背景。代碼如下：

const gradient=ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#1e3c72');
gradient.addColorStop(1, '#2a5298');
ctx.fillStyle=gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

3. 繪制樹

接下來，我們就可以開始繪制樹了。

3.1 繪制樹干

首先，我們需要繪制樹干。樹干是由一條豎直的線段組成的，我們可以通過Canvas的lineTo函數來實現。代碼如下：

ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height);
ctx.lineTo(canvas.width / 2, canvas.height - 50);
ctx.lineWidth=10;
ctx.strokeStyle='#8b5a2b';
ctx.stroke();

這段代碼中，我們首先通過beginPath函數開始一條新的路徑，然后通過moveTo函數將路徑的起點移動到Canvas的中心點，再通過lineTo函數將路徑的終點移動到Canvas的底部上方50個像素的位置。最后，我們通過lineWidth和strokeStyle屬性設置線段的寬度和顏色，并通過stroke函數將路徑繪制出來。

3.2 繪制樹枝

接下來，我們需要在樹干的頂端繪制樹枝。樹枝是由多條斜線段組成的，我們可以通過遞歸函數來實現。代碼如下：

function drawBranch(x1, y1, angle, depth) {
  if (depth===0) return;
  const x2=x1 + Math.cos(angle) * depth * 10;
  const y2=y1 + Math.sin(angle) * depth * 10;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth=depth;
  ctx.strokeStyle='#8b5a2b';
  ctx.stroke();
  drawBranch(x2, y2, angle - 0.3, depth - 1);
  drawBranch(x2, y2, angle + 0.3, depth - 1);
}
drawBranch(canvas.width / 2, canvas.height - 50, -Math.PI / 2, 10);

這段代碼中，我們定義了一個名為 drawBranch 的遞歸函數。該函數接受四個參數：x1、y1表示樹枝的起點坐標，angle表示樹枝的傾斜角度，depth表示樹枝的深度。當樹枝的深度為0時，遞歸結束。否則，我們先通過Math.cos和Math.sin函數計算出樹枝的終點坐標x2和y2，然后通過lineTo函數將路徑的終點移動到該坐標處。接著，我們通過lineWidth和strokeStyle屬性設置線段的寬度和顏色，并通過stroke函數將路徑繪制出來。最后，我們通過遞歸調用drawBranch函數來繪制下一層樹枝。

完整代碼

<canvas id="canvas" width="800" height="600"></canvas>
<script>
  const canvas=document.getElementById('canvas');
  const ctx=canvas.getContext('2d');

  const gradient=ctx.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, '#1e3c72');
  gradient.addColorStop(1, '#2a5298');
  ctx.fillStyle=gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  function drawBranch(x1, y1, angle, depth) {
    if (depth===0) return;
    const x2=x1 + Math.cos(angle) * depth * 10;
    const y2=y1 + Math.sin(angle) * depth * 10;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth=depth;
    ctx.strokeStyle='#8b5a2b';
    ctx.stroke();
    drawBranch(x2, y2, angle - 0.3, depth - 1);
    drawBranch(x2, y2, angle + 0.3, depth - 1);
  }
  drawBranch(canvas.width / 2, canvas.height - 50, -Math.PI / 2, 10);

</script>

動畫所示，應該加一句什么代碼呢？

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can=document.getElementById("mycanvas");
                var ctx=can.getContext("2d");
                ctx.shadowOffsetX=10;
                ctx.shadowBlur=10;
                ctx.shadowColor="#000";
                ctx.fillStyle="pink";  // 填充顏色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can=document.getElementById("mycanvas");
var ctx=can.getContext("2d");
ctx.shadowOffsetY=-20;
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle="pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can=document.getElementById("mycanvas");
var ctx=can.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle="pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

了解更多可查看鏈接：https://www.9xkd.com/

SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級聯樣式表”，CSS盒子模型是在網頁設計中用到的CSS技術中引用的一種思維模型。CSS盒子模型由內容區、填充、邊框、空白邊組成。

CSS盒子模型常見用途

由于CSS盒子模型是CSS中的一個重要概念，每一個元素都可以當作一個矩形的盒子，這個矩形盒子可以描述元素所占空間內容。CSS盒子模型更方便了設計者對網頁設計的整體把控。

CSS盒子模型繪制方法

用億圖圖示繪制CSS盒子模型十分簡單，只需要找到指定模板即可，新手參考以下幾個步驟即可完成CSS盒子模型的繪制。

第一步：下載“億圖圖示”軟件，啟動軟件界面，登錄賬號開始操作。

第二步：點擊搜索框輸入“CSS盒子模型”，尋找符合設計要求的CSS盒子模型模板，點擊“使用”打開CSS盒子模型模板。

第三步：點擊操作區的CSS盒子模型，根據自己的需要，在模板上修改各層次的注釋，在上方操作區更改字體為黑體，并更改字體大小。

第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側填充可以修改填充色、邊框顏色。

第五步：完成CSS盒子模型制作之后，點擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數之后，CSS盒子模型就可以存儲在電腦中。

以上就是CSS盒子模型繪制方法的相關介紹。

CSS盒子模型繪制軟件——億圖圖示

當有繪制CSS盒子模型的需求時，選擇億圖圖示這款國產矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設計開發，在滿足了用戶基本的繪圖需求基礎上，開發了模板套用功能，讓繪圖的效率提高許多，同時，在云存儲的加持下，億圖圖示用戶可以隨時隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個模板，在原有基礎上修改、添加需要的元素，提升繪圖效率。

為什么選擇億圖圖示繪制CSS盒子模型？

1、可靠軟件，值得信賴：億圖圖示經過了九個大版本的升級，軟件可靠程度大幅增加，現在已經擁有超過900萬用戶，龐大的使用群體是億圖圖示經受住市場優勝劣汰的體現。
2、軟件資源庫強大，滿足繪圖需求：億圖圖示擁有數量龐大的矢量符號庫和模板庫，當用戶繪圖時可以很輕松的找到自己需要的符號，即使符號很特殊在庫中找不到，用戶也可以自行繪制或者導入本地符號圖形、從庫外調用。
3、先用后付，性價比高：億圖圖示為新用戶謀福利，凡是新注冊的億圖圖示賬戶，均可長期使用免費基礎版本。當有高級需求的時候，可以再升級購買會員版。

在線咨詢

上一篇：如何通過程序爬取網頁上的內容并進行數據解析
下一篇：MFC功能擴展控件BCGSuite for MFC入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用Javascript 運用「遞歸」繪制「一棵樹」

1. 準備工作

2. 繪制背景

3. 繪制樹

完整代碼

圖形陰影繪制的屬性

給圖形繪制陰影

CSS盒子模型常見用途

CSS盒子模型繪制方法

CSS盒子模型繪制軟件——億圖圖示

為什么選擇億圖圖示繪制CSS盒子模型？

您的項目需求