Canvas元素用來支持在網(wǎng)頁上繪制圖形圖像
以前在網(wǎng)頁中進行交互繪圖是很困難的（需要依賴額外的第三方插件）侦另，而引入的Canvas特性使得作者可以很容易的在網(wǎng)頁上繪制各種圖形和圖像秩命。
Canvas提供了腳本（JavaScript）應(yīng)用接口，我們可以使用JS代碼來操作畫布褒傅，添加各種圖形以及實現(xiàn)用戶交互弃锐。這些特性使得HTML5在開發(fā)網(wǎng)頁游戲和一些復(fù)雜的網(wǎng)頁動畫上變得更加方便。
比如下面這個例子殿托，使用Canvas實現(xiàn)了簡單的在線畫板功能霹菊，你可以直接在網(wǎng)頁上繪制線條：
效果圖如下：
實際上Canvas規(guī)范包含兩個部分，一個是HTML5新引入的canvas元素支竹，還有更為關(guān)鍵的2D渲染上下文旋廷。實際上前者只是一個容器，后者才是真正繪圖的地方礼搁。它包含繪圖和圖形操作所需要的全部方法和豐富功能饶碘。 強調(diào)一下：繪圖是在2D渲染上下文中進行的，而不是在canvas元素中進行叹坦⌒芰停可以通過canvas元素訪問和顯示2D渲染上下文。
canvas元素的語法很簡單募书，除了id和class外，還有兩個和容器尺寸相關(guān)的屬性：寬和高测蹲。
<canvas id="myCanvas" height="500" width="500"></canvas>
我們接下來先搞清楚2D渲染上下文的用法莹捡。
畫布圖形實際上是繪制在2D渲染上下文里
canvas元素并非Canvas中最強大的部分，真正的關(guān)鍵部分是2D渲染上下文扣甲，這是你真正繪制圖形的地方篮赢。canvas元素的用途只是作為2D渲染上下文的包裝器齿椅，它包含繪圖和圖形操作所需要的全部方法和豐富功能。理解這一點是很重要的启泣，強調(diào)一下：繪圖是在2D渲染上下文中進行的涣脚，而不是在canvas元素中進行×让＃可以通過canvas元素訪問和顯示2D渲染上下文遣蚀。
坐標(biāo)系統(tǒng)
2D渲染上下文是一種基于屏幕的標(biāo)準繪圖平臺。與其他的2D平臺類似纱耻，它采用平面的笛卡兒坐標(biāo)系統(tǒng)芭梯，左上角為原點（0,0）。向右移動時弄喘，x坐標(biāo)值會增加玖喘；向下移動時，y坐標(biāo)值會增加蘑志。如果你想把圖形繪制到正確的位置上累奈，一定要理解這個坐標(biāo)系統(tǒng)。
坐標(biāo)系統(tǒng)的1個單位通常相當(dāng)于屏幕的1個像素急但，所以位置（24澎媒，30）是向右24像素和向下30像素的位置。有時候坐標(biāo)系統(tǒng)的1個單位相當(dāng)于2個像素（例如羊始，在一些高分辨率顯示器中）旱幼，但是一般的經(jīng)驗法則是1個坐標(biāo)單位等于1個屏幕像素。
訪問2D渲染上下文
我們先創(chuàng)建只有一個空白canvas元素的簡單HTML網(wǎng)頁：
<canvas id="myCanvas" width="200" height="200">
<!-- Insert fallback content here -->
</canvas>
在這個例子中突委，我們將這個canvas元素賦值給一個變量柏卤，然后再通過調(diào)用getContext方法將得到的2D渲染上下文賦給另一個變量。 必須強調(diào)一點匀油，由于我們使用了jQuery缘缚，所以需要調(diào)用get方法才能訪問DOM中的canvas元素，然后才能夠訪問Canvas的getContext方法敌蚜。
有了包含2D渲染上下文的變量之后桥滨，就可以開始繪制圖形了。在上下文變量聲明語句之后添加下面這行代碼：
context.fillRect(0,0,200,200);
完整的JS代碼如下：
上述代碼將在畫布上繪制如下的一個黑色矩形弛车，從坐標(biāo)（0齐媒，0）處開始，長寬均為200px：
這個矩形是黑色的纷跛，因為Canvas所繪制元素的默認顏色是黑色喻括。
最后，如果有想一起學(xué)習(xí)web前端贫奠，HTML5及JavaScript的可以來一下我的前端群733581373唬血，好友都會在里面交流望蜡，分享一些學(xué)習(xí)的方法和需要注意的小細節(jié)，每天也會準時的講一些前端的炫酷特效拷恨，及前端直播課程學(xué)習(xí)
?
如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗可以關(guān)注的微信號：‘web前端技術(shù)圈’或者‘webxh6’關(guān)注后回復(fù)‘2018’可以領(lǐng)取一套完整的學(xué)習(xí)視頻
