canvas（一）從零開始

前言

canvas是一個HTML5標籤，提供使用腳本繪製圖形圖像的api；最早由Apple引入WebKit，現兼容ie9+的常規瀏覽器，目前可以使用個<canvas>元素來繪製2d圖形。

開始準備

• 在常規的html頁面中插入html標籤容器 <canvas></canvas>
• 標籤屬性可以設置寬和高（默認300*150） <canvas width="100" height='100'></canvas>
• 由於我們需要是用腳本繪製，要獲取元素，可以設置id（當然其他途徑獲取dom亦可）<canvas id='cvs_1' width="100" height='100'></canvas>
• 至此我們可以看到瀏覽器渲染出一個100*100的盒子容器（沒有顏色，你可以使用瀏覽器看盒子模型）；

腳本獲取上下文 getContext

canvas提供api來自哪裏， 獲取渲染canvas的上下文，就是獲取到一個對象，掛載含有提供api的對象，我們需要用這個對象提供api來繪製。

    <script>
        var cvs_1 = document.getElementById('cvs_1');
        var ctx = cvs_1.getContext('2d');
        console.log(ctx)
        for(api in ctx){
            console.log(api)
        }
    </script> 

canvas兼容處理

標籤兼容：

不支持canvas的瀏覽器會把標籤忽略爲自定義標籤，顯示裏面的內容

    <canvas id="cv" width="100" height="100" >
        你看到這個的時候就是你瀏覽器不兼容 你看咋處理吧
    </canvas>

api兼容

有些兼容不好的api 需要根據按需求來判斷兼容並處理

    //  不支持api 該給用設置戶友好提示了
    if(!ctx.getContext) return;

繪製方形和 fillStyle、fillRect

    ctx.fillStyle = 'red';
    ctx.fillRect(10,10,50,50);

解讀

上面我們獲取到了canvas上下文，拿到對象可以對對象操作，以上兩個屬性和方法就是小栗子；

fillStyle

屬性值默認 #000 ,是一個string字符串，用於設置接下來繪製的顏色，可以設置爲顏色的對象、rgb、rgba等；

fillRect

方法接收四個參數，分別是x、y、width、height；x、y是繪製圖形的起點（左上角x，左上角y）

做點啥?

簡單的例子

笑果如下：

源代碼地址：點擊查看

還可以慢慢做點別有趣的小動畫 如下：

點擊查看代碼：點擊查看