1、什么是canvas?

Canvas 是H5的一部分，允許腳本語言動態渲染圖像。Canvas 定義一個區域，可以由CSS屬性定義該區域的寬高，JavaScript代碼可以訪問該區域，通過一整套完整的繪圖功能（API），在網頁上渲染動態效果圖。

Canvas本身沒有繪圖功能，初始化的Canvas沒有任何視覺效果，必須通過 JavaScript 拿到Canvas的 id，然后控制Canvas的繪制功能。所以想要使用Canvas，必須對 JavaScript 有一定的了解。本章將為大家介紹簡單的畫布創建以及幾種簡單的基礎形狀繪制。

2、canvas能做什么?

1. 游戲：游戲在HTML5領域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧。

2. 圖表制作：圖表制作時常被人們忽略，但無論企業內部還是企業間交流合作都離不開圖表?，F在一些開發者使用HTML/CSS完成圖表制作。當然，使用SVG（可縮放矢量圖形）來完成圖表制作也是非常好的方法。

3. 字體設計：對于字體的自定義渲染將完全可以基于Web，使用HTML5技術進行實現。

4. 圖形編輯器：圖形編輯器能夠100%基于Web實現。

5. 其他可嵌入網站的內容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

3、canvas兼容性

表格中的數字表示支持 <canvas> 元素的第一個瀏覽器版本號

4、canvas基本用法

4.1、創建畫布

通過聲明一個 Canvas 標簽可以創建一個畫布元素，Canvas 支持高度、寬度屬性。

實例演示:

    <!-- 如果瀏覽器支持canvas標簽，則會顯示500*400的黑色邊框區域，如果瀏覽器不支持canvas標簽，則會顯示標簽內部的文字 -->
    <canvas id="cans" width="500" height="400" style="border:1px solid #000">
       您的瀏覽器不支持canvas標簽
    </canvas>

代碼說明：如果瀏覽器支持Canvas標簽，則會顯示500*400的黑色邊框區域，如果瀏覽器不支持Canvas標簽，則會顯示標簽內部的文字

畫布坐標系:

畫布左上角(0,0)默認原點，x 坐標向右方增長，y 坐標則向下方延伸

但是，Canvas 的坐標系并不是一成不變的，原點是可改變的，可以對 Canvas 坐標系統進行移動 translate、旋轉 rotate 和縮放等變形操作。坐標變換之后繪制的圖形 x，y 偏移量都以新原點為準，旋轉角度，縮放比，以新坐標系角度為準。

獲取畫布對象：

聲明完畫布之后，要操控畫布必須獲取到它提供的繪圖 SDK 對象

var context = a.getContext(contextID)

通過 getContext 函數可以獲取畫布的 SDK 對象，在 HTML 中它被稱為 CanvasRenderingContext2D 對象。CanvasRenderingContext2D 提供了一系列用于繪圖的函數，其中包含顏色、樣式、陰影線條樣式、矩形路徑、轉換文本、圖像繪制函數等。接下來我們就幾個常見繪圖函數進行說明。

4.2、創建一個矩形

通過 fillRectangle函數可以創建一個矩形，使用 fillStyle 屬性為矩形填充顏色。

實例演示:

<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的瀏覽器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        ctx.fillStyle = "#f00"; 
        // fillRect(x,y,width,height) 方法定義了矩形當前的填充方式
        ctx.fillRect(0, 0, 250, 175); 
    </script>

代碼解釋:

• fillRect(x,y,width,height) 方法定義了矩形當前的填充方式

• ctx就是畫布對象

• 通過fillStyle屬性填充矩形區域顏色為#f00

• Canvas 是一個二維網格。Canvas 的左上角坐標為 (0,0)，fillRect 方法擁有參數 (0,0,250,175)，意思是：在畫布上，從左上角（0,0）開始繪制 250*175 的矩形。

4.3、繪制線條

使用 moveTo 函數定義線的開始坐標，lineTo 函數定義線的結束坐標，stroke 函數進行最終的繪制操作。

實例演示:

  <canvas id="cans" width="500" height="400" style="border:1px solid #000">您的瀏覽器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        //開始坐標在 (10,20)
        ctx.moveTo(20, 20); 
         //線條移動到 (20,100)
        ctx.lineTo(20, 100);
        //線條移動到 (70,100)
        ctx.lineTo(70, 100); 
        //線條顏色設置為綠色
        ctx.strokeStyle = "green"; 
        //描邊繪制
        ctx.stroke(); 
    </script>

代碼解釋：

在Canvas上畫線，我們將使用以下兩種方法：

• moveTo(x,y) 定義線條開始坐標

• lineTo(x,y) 定義線條結束坐標

• stroke() 繪制線條

4.4、繪制圓形

使用arc函數可以畫出一個圓形。

實例演示:

   <canvas id="cans" width="500" height="400" style="border:1px solid #000">您的瀏覽器不支持canvas</canvas>
    <script>
        var a = document.getElementById("cans");
        var ctx = a.getContext("2d");
        //arc(x,y,r,start,stop) 
        ctx.arc(100, 100, 80, 0, 2 * Math.PI); //圓心坐標是(100,100) 半徑是80 起始弧度0 結束弧度2PI
        ctx.stroke();
    </script>

代碼解釋：

我們采用arc(x,y,r,start,stop,counterclockwise)方法創建弧/曲線(用于創建圓或部分圓)。

如需通過 arc() 來創建圓，把起始角設置為 0，結束角設置為 2*Math.PI。使用 stroke()或fill() 方法在畫布上繪制實際的弧。

4.5、繪制文字

使用 strokeText 繪制文字。

實例演示:

<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的瀏覽器不支持canvas</canvas>
    <script>
        var canvas = document.getElementById('cans'),
            context = canvas.getContext('2d');
        context.font = '40px Arial';
        context.fillStyle = 'red';
        context.strokeStyle = 'yellow';
        context.fillText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15);
        context.strokeText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15);
    </script>

代碼解釋：

• font 屬性設置或返回畫布上文本內容的當前字體屬性，font 屬性使用的語法與CSS里font屬性相同。

  默認值：	10px sans-serif
  JavaScript 語法：	context.font="italic small-caps bold 12px arial";

• fillText() 方法在畫布上繪制填色的文本。文本的默認顏色是黑色

JavaScript 語法：

context.fillText(text,x,y,maxWidth);