一、Canvas簡介

HTML5?Canvas本質上是一個位圖畫布，其上繪制的圖形是不可縮放的，不像SVG圖像那樣可以被縮放大小。在網頁上使用canvas元素時，他會創建一塊矩形的區域。默認情況下該區域寬為300像素，高為150像素，但也可以自定義大小或者設置canvas元素的其他特性。如下我們可以在HTML5頁面的最基本的canvas元素。

<canvas></canvas>

在頁面中加入了canvas元素后，我們便可以通過JavaScript來自由的控制它。可以在其中添加圖片，線條以及文字，也可以在里面繪圖，甚至還可以加入高級動畫。

使用canvas變成，首相要獲取其上下文（context）。接著在上下文中執行動作，最后將這些動作應用到上下穩重。可以將canvas的這種編輯方式想象成為數據庫事務：開發人員先發起一個事務，然后執行某些操作，最后提交事務

二、canvas坐標

如上圖所示，canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿著垂直方向向下延伸。左上角的坐標為x=0，y=0的點稱為原點。

三、瀏覽器對HTML5?Canvas的支持情況：

隨著IE9的到來，所有瀏覽器廠商現在都提供了對HTML5 Canvas的支持，而且它已被大多數用戶所掌握。這是Web開發史上一個重要的里程碑，它使得2D繪圖在現代網絡上蓬勃發展。

盡管舊版本IE占有的市場份額正在逐漸縮小，但在使用Canvas?API之前，我們還是應該首先檢測瀏覽器是否支持HTML5 Canvas。

四、檢測瀏覽器支持情況：

在創建canvas元素之前，首先要確保瀏覽器能夠支持他。如果不支持，你就要為那些古董級級瀏覽器提供一些替代文字。

<script type=”text/javascript”> window.onload = function(){ try{ document.createElement("canvas").getContext("2d"); document.getElementById("support").innerHTML="支持Canvas"; }catch(e){ document.getElementById("support").innerHTML="不支持Canvas"; } }; </script> <h1?id="support"></h1>

上邊的代碼嘗試在頁面中創建一個canvas對象，并獲取其上下文。如果發生錯誤則在頁面的h1標簽中顯示不支持Canvas，否則顯示支持Canvas。

 

 

本教程由尚硅谷教育大數據研究院出品，如需轉載請注明來源，歡迎大家關注尚硅谷公眾號（atguigu）了解更多。