<canvas>是一個可以使用腳本（JavaScript）在其中繪制圖形的HTML元素仿粹，它可以用于制作照片或者制作簡單的動畫块攒。
<canvas> 元素
<canvas>看起來和<img>元素很相像硬猫，唯一的不同就是沒有 src 和 alt 屬性觅彰。<canvas>只有兩個屬性——width和height曲初。默認(rèn)情況下canvas會初始寬度為300像素和高度為150像素的畫板。
<canvas id='canvas' width='300' height='150'></canvas>
給<canvas>標(biāo)簽添加 id 屬性绊寻，方便 js 代碼對該 canvas 面板進(jìn)行操作
閉合標(biāo)簽 </canvas> 不能省略
內(nèi)容替換
<canvas>不同于其他標(biāo)簽花墩，由于某些較老的瀏覽器不支持該html元素悬秉，需要留下替換的信息。
只需要在<canvas>標(biāo)簽內(nèi)部提供替換內(nèi)容冰蘑，支持<canvas>的瀏覽器將會忽略包含在容器中的內(nèi)容和泌，并且只是正常的渲染<canvas>。
<canvas id='canvas' width='300' height='150'>
current stock price:$$$$
</canvas>
渲染上下文
<canvas>元素創(chuàng)造了一個固定大小的畫布祠肥，它公開了一個或者多個渲染上下文武氓，其可以用來繪制和處理要展示的內(nèi)容。
<canvas>起初是空白的仇箱，為了展示县恕，首先腳本需要找到渲染上下文，然后在它的上面繪制剂桥。<canvas>元素有一個叫做getContext()的方法忠烛，這個方法是用來獲取渲染上下文和它的繪畫功能。getContext()只有一個參數(shù)权逗，上下文的格式美尸。
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
檢查支持性
替換內(nèi)容是用在不支持<canvas>標(biāo)簽的瀏覽器中展示的。通過簡單的測試 getContext() 方法是否存在斟薇，腳本可以檢查編程支持性师坎。
let canvas = document.getElementById('canvas')
if(canvas.getContext()){
let ctx = canvas.getContext()
//code....
}
