腳本獲取上下文 getContext

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

<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的瀏覽器會把標籤忽略爲自定義標籤，顯示裏面的內容java

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

api兼容

有些兼容很差的api 須要根據按需求來判斷兼容並處理git

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

填充 方形和 fillStyle、fillRect

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

解讀

上面咱們獲取到了canvas上下文，拿到對象能夠對對象操做，以上兩個屬性和方法就是小栗子；github

fillStyle

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

fillRect

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

作點啥?

簡單的例子

笑果以下：

源代碼地址：點擊查看瀏覽器

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

點擊查看代碼：點擊查看dom

拓展

繪製 矩形邊框 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... 清除動畫