Canvas入門（一）

發(fā)布日期：2018-09-20 作者：atguigu 5174人瀏覽

一、Canvas簡介

HTML5?Canvas本質(zhì)上是一個位圖畫布，其上繪制的圖形是不可縮放的，不像SVG圖像那樣可以被縮放大小。在網(wǎng)頁上使用canvas元素時，他會創(chuàng)建一塊矩形的區(qū)域。默認(rèn)情況下該區(qū)域?qū)挒?00像素，高為150像素，但也可以自定義大小或者設(shè)置canvas元素的其他特性。如下我們可以在HTML5頁面的最基本的canvas元素。

<canvas></canvas>

在頁面中加入了canvas元素后，我們便可以通過JavaScript來自由的控制它?？梢栽谄渲刑砑訄D片，線條以及文字，也可以在里面繪圖，甚至還可以加入高級動畫。

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

二、canvas坐標(biāo)

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

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

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

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

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

在創(chuàng)建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>

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

 

 

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