HTML5學習手筆二：canvasAPI繪製樹形圖案A

技術小胖子發表於2017-11-15
原文網址 : https://flycode.co/archives/148502
HTMLCanvasAPI

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

本篇大綱

 

  1. 用canvas API繪製樹木的樹冠
  2. 為樹冠的邊框架加粗並且填充樹冠顏色
  3. 為樹冠創造一個強大的樹幹
  4. 繪製跑道 

用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效果如下：

上面的程式碼中有一個特殊的函式叫做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效果見下面執行效果：

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

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

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

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

 

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

建立樹幹有兩種方法：

 

  1. 用我們上面學過的使用線條然後配合closePath畫樹幹
  2. HTML5 提供了一個強大的填充矩形的函式 fillRect 可以畫一塊矩形x軸、y軸、需要畫的寬度和高度即可 

 

在這裡我們使用fillRect 來構建樹幹。程式碼如下：

 

 context.fillStyle=`#663300`;

                context.fillRect(-5,-50,10,50);

 

 效果DEMO如下：

  

與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效果如下：

 

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

 

 本文轉自 terry_龍 51CTO部落格，原文連結：http://blog.51cto.com/terryblog/798910，如需轉載請自行聯絡原作者


相關文章