1.什么是Canvas？

• canvas 是 HTML5 提供的一個用于展示繪圖效果的標(biāo)簽
• HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
• 畫布是一個矩形區(qū)域，可以控制其每一像素。
• canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

2.創(chuàng)建Canvas標(biāo)簽

<canvas id="myCanvas" width="600" height="400"></canvas>

• 此標(biāo)簽只能展示繪圖內(nèi)容，不能進(jìn)行繪圖。
• canvas的兼容性， IE9及其以上版本的瀏覽器，才支持canvas標(biāo)簽 。

3.通過JavaScript來繪制

• canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成

3.1 畫一個簡單的紅色矩形

<script type="text/javascript">
  var c=document.getElementById("myCanvas");   //使用id來尋找canvas元素
  var cxt=c.getContext("2d");   //創(chuàng)建Context對象

  /*下面兩行繪制紅色矩形*/
  cxt.fillStyle="#FF0000";
  cxt.fillRect=(0,0,150,75);
</script>

效果如圖

• getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
• fillStyle() 設(shè)置或返回用于填充繪畫的顏色、漸變或模式，將其染成紅色。
• fillRect() 方法繪制“被填充”的矩形，規(guī)定了形狀、位置和尺寸。

4.一些Canvas的方法和屬性

5.瀏覽器支持

• Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。

• Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

簡單的總結(jié)：
在朋友的推薦下今天是第一次在這里寫這種文章，這大概只能算是一篇小小的學(xué)習(xí)記錄，并沒有什么技術(shù)含量，我的文筆很差，寫不出來很華麗的東西，但是偶爾寫寫，大概也對自己知識積累寫作提升有很大幫助吧。
通過對canvas的學(xué)習(xí)，知道了它好像是個不得了的東西，今天只是初步的了解了它的一些基礎(chǔ)知識，不懂的東西還很多，接下來也會繼續(xù)學(xué)習(xí)提升自己。