Html5 學習系列（五）Canvas繪圖API快速入門（2）

標籤：style   blog   http   os   使用   java   io   ar   for   

Canvas繪圖API Demos

上一篇文章中，筆者已經給大家示範了怎麼快速用Canvas的API繪製一個矩形出來。接下裡我會在本文中給各位介紹Canvas的其他API：繪製線條、繪製橢圓、繪製圖片、圖片處理等...如果想獲得更好的閱讀效果請點擊老馬的獨立部落格地址。

一、Canvas繪製線條    Context對象的beginPath方法表示開始繪製路徑，moveTo(x, y)方法設定線段的起點，lineTo(x, y)方法設定線段的終點，stroke方法用來給透明的線段著色。moveto和lineto方法可以多次使用。最後，還可以使用closePath方法，自動繪製一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。

                                <body>        <canvas id="demoCanvas" width="500" height="600">        </canvas>        <script type="text/javascript">            //通過id獲得當前的Canvas對象            var canvasDom = document.getElementById("demoCanvas");            //通過Canvas Dom對象擷取Context的對象            var context = canvasDom.getContext("2d");            context.beginPath(); // 開始路徑繪製            context.moveTo(20, 20); // 設定路徑起點，座標為(20,20)            context.lineTo(200, 200); // 繪製一條到(200,20)的直線            context.lineTo(400, 20);            context.closePath();            context.lineWidth = 2.0; // 設定線寬            context.strokeStyle = "#CC0000"; // 設定線的顏色            context.stroke(); // 進行線的著色，這時整條線才變得可見        </script>        </body>    

查看線上示範 二、Canvas繪製文本    Context內容物件的fillText(string, x, y)方法是用來繪製文本，它的三個參數分別為常值內容、起點的x座標、y座標。使用之前，需用font設定字型、大小、樣式（寫法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來添加空心字。另外注意一點：fillText方法不支援文本斷行，即所有文本出現在一行內。所以，如果要產生多行文本，只有調用多次fillText方法。以下是代碼Demo：

                                <canvas id="demoCanvas" width="500" height="600"></canvas>        <script type="text/javascript">            //通過id獲得當前的Canvas對象            var canvasDom = document.getElementById("demoCanvas");            //通過Canvas Dom對象擷取Context的對象            var context = canvasDom.getContext("2d");            context.moveTo(200,200);                        // 設定字型            context.font = "Bold 50px Arial";            // 設定對齊            context.textAlign = "left";            // 設定填充顏色            context.fillStyle = "#005600";            // 設定字型內容，以及在畫布上的位置            context.fillText("老馬!", 10, 50);            // 繪製空心字            context.strokeText("blog.itjeek.com!", 10, 100);        </script>

查看線上示範 三、Canvas繪製圓形和橢圓    在上一篇文章中，筆者已經跟大家介紹過了繪製矩形，繪製其他形狀，比如圓形等，都是一個思路，只不過是方法不同罷了。那接下裡給各位示範一小繪製圓形和橢圓。Context內容相關的arc方法就是繪製圓形或者橢圓，arc方法的x和y參數是圓心座標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）。以下是繪製圖形的Demo：

        <canvas id="demoCanvas" width="500" height="600"></canvas>        <script type="text/javascript">            //通過id獲得當前的Canvas對象            var canvasDom = document.getElementById("demoCanvas");            //通過Canvas Dom對象擷取Context的對象            var context = canvasDom.getContext("2d");            context.beginPath();//開始繪製路徑            //繪製以 （60,60）為圓心，50為半徑長度，從0度到360度（PI是180度），最後一個參數代表順時針旋轉。            context.arc(60, 60, 50, 0, Math.PI * 2, true);            context.lineWidth = 2.0;//線的寬度            context.strokeStyle = "#000";//線的樣式            context.stroke();//繪製空心的，當然如果使用fill那就是填充了。        </script>

查看線上示範 還不趕快動手試一下？ 四、Canvas繪製圖片    Canvas繪製圖片應該是他的一大特點或者是亮點吧。當然配合File的API，讓JS變得無可匹敵。那接下裡給大家示範一下怎樣繪製圖片，並且做出一個立體效果出來。以下是繪製圖片的Demo：

    <canvas id="demoCanvas" width="500" height="600"></canvas>    <script type="text/javascript">        //通過id獲得當前的Canvas對象        var canvasDom = document.getElementById("demoCanvas");        //通過Canvas Dom對象擷取Context的對象        var context = canvasDom.getContext("2d");        var image = new Image();//建立一張圖片        image.src = "Images/a.png";//設定圖片的路徑        image.onload = function() {//當圖片載入完成後            for (var i = 0; i < 10; i++) {//輸出10張照片                //參數：（1）繪製的圖片  （2）座標x，（3）座標y                context.drawImage(image, 100 + i * 80, 100 + i * 80);            }        };    </script>

查看線上示範 還不趕快動手試一下？ 五、總結Canvas總算介紹了最基本的用法了。當然本文大量借鑒了其他網站的例子。作者也是把最基本的精華部分羅列了一下。總體來說Canvas繪製圖片和文本、形狀都不是很難，API代碼上手難度基本就是初級。但是由此而帶來的非常多的可能，讓Html5真正的強大到無可比擬的地步。當然本文並沒有涉及到Canvas3D繪製的相關內容，而且關於Canvas繪製漸層色、繪製陰影、圖片的相關處理操作等，這些內容，如果讀者確實需要的可以自行搜尋尋找相關資料或者直接閱讀Html5的最新標準文檔。

本文參考：http://javascript.ruanyifeng.com/htmlapi/canvas.html

 

本文永久地址：http://blog.itjeek.com/blogs/Html5-5-canvas2.html

Html5 學習系列（五）Canvas繪圖API快速入門（2）