js畫布組件( )

時間 2019-12-08

原文原文鏈接

1、Canvas是什麼？

Canvas就是一個畫布，能夠進行畫任何的線、圖形、填充等一系列的操做，並且操做的畫圖就是js，因此讓js編程到了嗑藥的地步。另外Canvas不只僅提供簡單的二維矢量繪圖，也提供了三維的繪圖，以及圖片處理等一系列的api支持。javascript

2、Canvas重要Context對象

(1) 要使用Canvas來繪製圖形必須在頁面中添加Canvas的標籤。html

例如： <canvas id="demoCanvas" width="500" height="500"> <p>爺，你還在上個世紀吧，如今都html5了，您還在ie6時代？</p> </canvas>html5

(2) 固然只有上面的標籤，只能是建立好了一個畫布，其中width和height屬性就是設置畫布的大小。Id屬性也是必須的，後面要用Id來拿到當前的Canvas的Dom對象。經過此Canvase的Dom對象就能夠獲取他的上下文了，Canvas繪製圖形都是靠着Canvas對象的上下文對象.java

代碼：
<script type="text/javascript"> //第一步：獲取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步：獲取上下文 var context = canvasDom.getContext('2d'); </script>編程

(3) Context上下文默認兩種繪製方式：第一種：繪製線（stroke），第二種：填充：fill。canvas

注意：決定了使用哪一種方式以後，在填充或者繪製線以前先設置樣式。

3、Canvas Fisrt Demo：畫一個立體透明的矩形

Canvas繪製的整體的步驟

建立HTML頁面，設置畫布標籤
編寫js，獲取畫布dom對象
經過Canvas標籤的Dom對象獲取上下文
設置繪製線樣式、顏色
繪製矩形，或者填充矩形

Canvas繪製一個矩形和填充一個矩形的Demo

<body>
    <canvas id="demoCanvas" width="500" height="500">
        <p>爺，你還在上個世紀吧，如今都html5了，您還在ie6時代？</p>
    </canvas>
    <!---下面將演示一種繪製矩形的demo--->
    <script type="text/javascript">
         
        //第一步：獲取canvas元素
        var canvasDom = document.getElementById("demoCanvas");
        //第二步：獲取上下文
        var context = canvasDom.getContext('2d');
        //第三步：指定繪製線樣式、顏色
        context.strokeStyle = "red";
        //第四步：繪製矩形，只有線。內容是空的
        context.strokeRect(10, 10, 190, 100);
        
        //如下演示填充矩形。
        context.fillStyle = "blue";
        context.fillRect(110,110,100,100);
    </script>
</body>

最終效果下圖：

4、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>

6、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>

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