mg不朽情缘游戏平台

書名：從0到1：HTML5 Canvas動畫開發
作者名：莫振杰
本章字數： 1330字
更新時間： 2020-06-15 16:26:06

1.2 Canvas元素

HTML5 Canvas，簡單來說，就是一門使用JavaScript來操作Canvas元素的技術。使用Canvas元素來繪制圖形，需要以下3步。

① 獲取canvas對象。

② 獲取上下文環境對象context。

③ 開始繪制圖形。

舉例

<!DOCTYPE html>

<html>

<head>

window.onload = function () {

//1、獲取canvas對象

var cnv = document.getElementById("canvas");

//2、獲取上下文環境對象context

var cxt = cnv.getContext("2d");

//3、開始繪制圖形

cxt.moveTo(50, 100);

cxt.lineTo(150, 50);

cxt.stroke();

}

</script>

</head>

<body>

</body>

</html>

預覽效果如圖1-7所示。

圖1-7 畫直線

分析

在Canvas中，我們使用document.getElementById()方法來獲取Canvas對象（這是一個DOM對象），然后使用Canvas對象的getContext("2d")方法獲取上下文環境對象context，最后使用context對象的屬性和方法來繪制各種圖形。

1.2.1 Canvas元素簡介

Canvas是一個行內塊元素（即inline-block），我們一般需要指定其3個屬性：id、width和height。width和height分別用于定義Canvas元素的寬度和高度。默認情況下，Canvas元素的寬度為300px（Pixel，像素），高度為150px。

對于Canvas的寬度和高度，我們有兩種方法來定義：一是在HTML屬性中定義，二是在CSS樣式中定義。但是在實際開發中，我們一定不要在CSS樣式中定義，而應該在HTML屬性中定義。為什么呢？我們先來看一個例子。

舉例

<!DOCTYPE html>

<html>

<head>

canvas

{

width:200px;

height:150px;

}

</style>

window.onload = function () {

var cnv = document.getElementById("canvas");

var str = "canvas的寬度為：" + cnv.width + "，高度為：" + cnv.height;

alert(str);

}

</script>

</head>

<body>

</body>

</html>

預覽效果如圖1-8所示。

圖1-8 無法獲取正確的寬度和高度

分析

從這個例子我們可以看出：如果在CSS樣式中定義，Canvas元素的寬度和高度是默認值，而不是所定義的寬度和高度，這樣我們就無法獲取Canvas元素正確的寬度和高度。獲取Canvas元素實際的寬度和高度是Canvas開發中最常用的操作，因此對于Canvas元素的寬度和高度，我們一定要在HTML屬性中定義，而不是在CSS樣式中定義。

1.2.2 Canvas對象

在Canvas中，我們使用document.getElementById()來獲取Canvas對象。Canvas對象常用的屬性和方法如表1-1和表1-2所示。

表1-1 Canvas對象的常用屬性

表1-2 Canvas對象的常用方法

也就是說，我們可以使用cnv.width和cnv.height分別獲取Canvas對象的寬度和高度，可以使用cnv.getContext("2d")來獲取Canvas 2D上下文環境對象，也可以使用toDataURL()來獲取Canvas對象產生的位圖的字符串。在這里，cnv指的是Canvas對象。

對于toDataURL()方法，小伙伴們暫時不需要深入了解，在后面的章節中會給大家詳細介紹。這里我們要認真學習getContext("2d")方法。在Canvas中，我們使用getContext("2d")來獲取Canvas 2D上下文環境對象，這個對象又被稱為context對象。后面章節接觸的所有圖形的繪制，使用的都是context對象的屬性和方法，我們要特別清楚這一點。當然，現在不理解沒關系，學到后面再回過頭來看看這段話就懂了。

舉例

<!DOCTYPE html>

<html>

<head>

window.onload = function () {

var cnv = document.getElementById("canvas");

var str = "Canvas的寬度為：" + cnv.width + "，高度為：" + cnv.height;

alert(str);

}

</script>

</head>

<body>

</body>

</html>

預覽效果如圖1-9所示。

圖1-9 獲取正確的寬度和高度

特別要注意一點：在本書中所有圖形的繪制，使用的都是context對象（上下文環境對象）的屬性和方法。

【解惑】

1．我們可以使用getContext("2d")來實現2D繪圖，那是不是意味著可以使用getContext ("3d")來實現3D繪圖呢？

HTML5 Canvas暫時只提供2D繪圖API,3D繪圖可以使用HTML5中的WebGL實現。不過3D繪圖一直以來都是HTML5中的“黑科技”，技術要求高并且難度大。等學完了這本書，有興趣的小伙伴可以關注綠葉學習網的WebGL教程。

2．對于IE瀏覽器來說，暫時只有IE9以上版本支持HTML5 Canvas，那怎么處理IE7和IE8的兼容性問題呢？

對于IE7和IE8，我們可以借助“explorercanvas”這個擴展來解決。該擴展下載地址為：https://github.com/arv/explorercanvas。

我們只需要在頁面中像引入外部JavaScript文件那樣引入“excanvas.js”就可以了，代碼如下。

<!--[if IE]>

<![end if]-->

不過要跟大家說明一下，低版本的IE瀏覽器即使引入了“excanvas.js”來使用Canvas，在功能上也會有很多限制，如無法使用fillText()方法等。

3．除了這本書，還有哪些值得推薦的Canvas教程？

建議小伙伴們多看看W3C官方網站的Canvas開發文檔，因為這是比較權威的參考資料。W3C官網地址：www.w3.org/TR/2dcontext/。

官术网_书友最值得收藏!

從0到1：HTML5 Canvas動畫開發

1.2 Canvas元素

1.2.1 Canvas元素簡介

1.2.2 Canvas對象