前言

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）

作點啥?

簡單的例子

笑果以下：

源代碼地址：點擊查看

還能夠慢慢作點別有趣的小動畫 以下：

點擊查看代碼：點擊查看

拓展

繪製 矩形邊框 rect

ctx.strokeStyle='blue';
    ctx.rect(10,10,70,70);
    ctx.stroke();

繪製 矩形區域 strokeRect

ctx.strokeStyle = 'blue';
    ctx.strokeRect(1,1,90,90);

清除 矩形區域

ctx.clearRect(40,40,10,10)

以上參數原理都同樣，從命名理解：
fill... 填充
stroke... 繪製
clear... 清除