? ? 上篇通過對canvas 畫對角線，了解了一些canvas畫圖基本原理。現在可以利用HTML5 canvas API創建一個場景：帶有長跑跑道的樹林。

本篇大綱

用canvas API繪制樹木的樹冠

為樹冠的邊框架加粗并且填充樹冠顏色

為樹冠創造一個強大的樹干

繪制跑道?

用canvas API繪制樹木的樹冠

原理還是與上篇畫對角線一樣，只是步驟增多而已，先看代碼：

?

<script?type="text/javascript">
????????????????function?createCanopyPath(context){
??????????????????context.beginPath();
??????????????????
?????????????????context.moveTo(-25,-50);
?????????????????context.lineTo(-10,-80);
?????????????????context.lineTo(-20,-80);
?????????????????context.lineTo(-5,-110);
?????????????????context.lineTo(-15,-110);

?????????????????context.lineTo(0,-140);

?????????????????context.lineTo(15,-110);
?????????????????context.lineTo(5,-110);
?????????????????context.lineTo(20,-80);
?????????????????context.lineTo(10,-80);
?????????????????context.lineTo(25,-50);

?????????????????context.closePath();
????????????????}

????????function?drawTrails(){
????????????????var?canvas=document.getElementById('diagonal');
????????????????var?context=canvas.getContext('2d');
????????????????
????????????????context.save();
????????????????context.translate(130,250);
????????????????
????????????????createCanopyPath(context);
????????????????context.stroke();
????????????????context.restore();
????????}
?window.addEventListener("load",drawTrails,true);
????????</script>

DEMO效果如下：

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br id="-moz-br-"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

上面的代碼中有一個特殊的函數叫做closePath。這個函數的行為同lineTo很像，唯一的差別在于closePath會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形己經閉合或者形成了完全封閉的區域。

?

?為樹冠的邊框架加粗并且填充樹冠顏色

?為了使樹冠更加形象并且看起來像真的樹，不得不利用canvas 的API繪制其圖形外觀，代碼如下：

?

function?drawTrails(){
var?canvas=document.getElementById('diagonal');
????????????????var?context=canvas.getContext('2d');
????????????????
????????????????context.save();
????????????????context.translate(130,250);
????????????????
????????????????createCanopyPath(context);
????????????????//加寬線條
????????????????context.lineWidth=4;
????????????????//平滑路徑的接合點
????????????????context.lineJoin='round';
????????????????//將顏色改成棕色
????????????????context.strokeStyle='#663300';
????????????????
????????????????//將填充色設置為綠色并填充樹冠
????????????????context.fillStyle='#339900';
????????????????context.fill();
????????
????????????????context.stroke();
????????????????context.restore();
????????}

?

?DEMO效果見下面運行效果：

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br id="-moz-br-"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

lineJoin屬性設置為round，這是修改當前形狀中線段的連接方式，讓拐角變得更加油；也可以把lineJoin屬性設置成bevel或者miter來變換拐角樣式。

strokeStyle屬性是為了改變線條顏色。

fillStyle屬性是為了設置填充顏色

context 的fill 函數是為了可以讓canvas對當前圖形中所有的閉合路徑內部的像素點進行填充，配合fillStyle 填充內部像形點顏色。

?

?為樹冠創造一個強大的樹干

創建樹干有兩種方法：

用我們上面學過的使用線條然后配合closePath畫樹干

HTML5 提供了一個強大的填充矩形的函數 fillRect 可以畫一塊矩形x軸、y軸、需要畫的寬度和高度即可?

?

在這里我們使用fillRect 來構建樹干。代碼如下：

?

context.fillStyle='#663300';
????????????????context.fillRect(-5,-50,10,50);

?

?效果DEMO如下：

? &amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;br id="-moz-br-"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;gt;

與fillRect相關的函數還有：strokeRect和clearRect。strokeRect的作用是基于給出的位置和坐標畫出矩形的輪廓，clearRect的作用是清除矩形區域內的所有內容并將它恢復到初始狀態，即透明。

?

?

?繪制跑道?

?完成本篇最后一個功能，在小樹旁邊畫上一個跑道。代碼如下：

function?drawTrails(){
????????????????var?canvas=document.getElementById('diagonal');
????????????????var?context=canvas.getContext('2d');
????????????????
????????????????context.save();
????????????????context.translate(130,250);
????????????????
????????????????createCanopyPath(context);
????????????????//加寬線條
????????????????context.lineWidth=4;
????????????????//平滑路徑的接合點
????????????????context.lineJoin='round';
????????????????//將顏色改成棕色
????????????????context.strokeStyle='#663300';
????????????????
????????????????//將填充色設置為綠色并填充樹冠
????????????????context.fillStyle='#339900';
????????????????context.fill();
????????????????
????????????????context.fillStyle='#663300';
????????????????context.fillRect(-5,-50,10,50);
????????
????????????????context.stroke();
????????????????context.restore();

????????????????context.save();
????????????????context.translate(-10,350);
????????????????context.beginPath();
????????????????context.moveTo(0,0);
????????????????//第一條曲線向右上方彎曲
????????????????context.quadraticCurveTo(170,-50,260,-190);
????????????????//第二條曲線向右下方彎曲
????????????????context.quadraticCurveTo(310,-250,410,-250);
????????????????context.strokeStyle='#663300';
????????????????context.lineWidth=20;
????????????????context.stroke();
????????????????context.restore();
? ? ? ? }?

quadraticCurveTo函數繪制曲線的起點是當前坐標，帶有兩組(x,y)參數。第二組是指曲線的終點。第一組代表控制點。所謂的控制點位于曲線的旁邊，其作用相當于對曲線產生一個拉力。通過高速控制點的位置，就可以改變曲線的曲率。在右上方再畫一條一樣的曲線，以形成一條路。DEMO效果如下：

?&amp;amp;lt;/p&amp;amp;gt; &amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt; &amp;amp;lt;br id="-moz-br-"&amp;amp;gt;&amp;amp;lt;/body&amp;amp;gt;&amp;amp;lt;/html&amp;amp;gt;

與quadraticCureTo函數一樣的曲線功能還涉及：bezierCurveTo、arcTo和arc函數。這些函數通過多種控制點（如半徑、角度和等）讓曲線更具可塑性。

?

本文參考自：pro HTML5 Programming.?

?

轉載于:https://www.cnblogs.com/TerryBlog/archive/2012/02/25/2367718.html

總結

以上是生活随笔為你收集整理的HTML5 学习手笔二：canvas API 绘制树形图案A的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。