1.什么是Canvas？
- canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽
- HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
- 畫布是一個矩形區域，可以控制其每一像素。
- canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
2.創建Canvas標簽
<canvas id="myCanvas" width="600" height="400"></canvas>
- 此標簽只能展示繪圖內容，不能進行繪圖。
- canvas的兼容性， IE9及其以上版本的瀏覽器，才支持canvas標簽 。
3.通過JavaScript來繪制
- canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成
3.1 畫一個簡單的紅色矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id來尋找canvas元素
var cxt=c.getContext("2d"); //創建Context對象
/*下面兩行繪制紅色矩形*/
cxt.fillStyle="#FF0000";
cxt.fillRect=(0,0,150,75);
</script>
效果如圖
- getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
- fillStyle() 設置或返回用于填充繪畫的顏色、漸變或模式，將其染成紅色。
- fillRect() 方法繪制“被填充”的矩形，規定了形狀、位置和尺寸。
4.一些Canvas的方法和屬性
5.瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。
Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
簡單的總結：
在朋友的推薦下今天是第一次在這里寫這種文章，這大概只能算是一篇小小的學習記錄，并沒有什么技術含量，我的文筆很差，寫不出來很華麗的東西，但是偶爾寫寫，大概也對自己知識積累寫作提升有很大幫助吧。
通過對canvas的學習，知道了它好像是個不得了的東西，今天只是初步的了解了它的一些基礎知識，不懂的東西還很多，接下來也會繼續學習提升自己。
