閱讀208 返回首頁    go 阿裏雲 go 技術社區[雲棲]

《Web前端開發精品課——HTML5 Canvas開發詳解》——第一部分　Canvas基礎

本節書摘來自異步社區《Web前端開發精品課——HTML5 Canvas開發詳解》一書中的第1部分，第1章，作者：莫振傑 著，更多章節內容可以訪問雲棲社區“異步社區”公眾號查看

第1章　Canvas概述

1.1　Canvas簡介

在HTML5之前，為了達到頁麵絢麗多彩的效果，我們很多情況下都是借助“圖片”來實現。不過使用圖片這種方式，都是以“低性能”為代價的。由於圖片體積大、下載速度慢等原因，因此為了應對日漸複雜的Web應用開發，W3C在HTML5標準中引入了Canvas這一門技術。

我們都知道，HTML5新增了一個Canvas元素。其實，Canvas又稱為“畫布”，是HTML5的核心技術之一。我們常說的Canvas技術，指的就是使用Canvas元素結合Javascript來繪製各種圖形的技術。

既然Canvas是HTML5核心技術，那它都有哪些厲害之處呢？

1．繪製圖形

Canvas可以用來繪製各種基本圖形如矩形、曲線、圓等，也可以繪製各種複雜絢麗的圖形，如圖1-1所示。

image

2．繪製圖表

很多公司業務的數據展示都離不開圖表，使用Canvas可以用來繪製滿足各種需求的圖表，如圖1-2所示。

image

3．動畫效果

使用Canvas，我們也可以製作出各種華麗的動畫效果，這也是Canvas為大家帶來的一大樂趣，如圖1-3所示。

image

4．遊戲開發

遊戲開發在HTML5領域具有舉足輕重的地位，現在我們也可以使用Canvas來開發各種遊戲，如圖1-4所示。這幾年非常火的遊戲如圍住神經貓等，就是使用HTML5 Canvas來開發的。

image


此外，Canvas技術是一門純JavaScript操作的技術，因此大家需要具備JavaScript入門知識。對於JavaScript的學習，可以關注綠葉學習網（www.lvyestudy.com）中的開源教程。

1.1.2　Canvas與SVG

HTML5有兩個主要的2D圖形技術：Canvas和SVG。事實上，Canvas和SVG是兩門完全不同的技術。兩者具有以下區別。

（1）Canvas是使用JavaScript動態生成的，SVG是使用XML靜態描述的。

（2）Canvas是基於“位圖”的，適用於像素處理和動態渲染，圖形放大會影響質量。SVG是基於“矢量”的，不適用於像素處理和靜態描述，圖形放大不會影響質量。也就是說，使用Canvas繪製出來的是一個“位圖”，而使用SVG繪製出來的是一個“矢量圖”。如圖1-5和圖1-6所示。

image


（3）每次發生修改，Canvas需要重繪，而SVG不需要重繪。

（4）Canvas與SVG的關係，簡單來說，就像“美術與幾何”的關係一樣。

此外，並非Canvas就比SVG更有前途，也並非SVG就比Canvas更有前途，因為這兩個是用於不同場合的。在實際開發中，我們應該根據開發需求去選擇。

當然，這裏隻是簡單介紹了一下Canvas與SVG的區別，如果想真正了解，我們還需要深入學習這兩門技術。最後給大家一個小小的建議：很多人接觸新技術的時候，喜歡在第一遍學習中就把每一個細節都弄清楚，事實上這是效率最低的學習方法。在第一遍學習中，如果有些東西實在沒辦法理解，那就直接跳過，等到學到後麵或者看第二遍的時候，自然而然就懂了。

1.2　Canvas元素知識

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

（1）獲取canvas對象。

（2）獲取上下文環境對象context。

（3）開始繪製圖形。
舉例：

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
　 <title></title>
　 <meta charset="utf-8" />
　 <script type="text/javascript">
　　　　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>
　 <canvas  width="200" height="150" ></canvas>
</body>
</html>

在瀏覽器中的預覽效果如圖1-7所示。

image


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

1.2.1　Canvas元素

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

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

舉例：

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
　 <title></title>
　 <meta charset="utf-8" />
　 <style type="text/css">
　　　　canvas
　　　　{
　　　　　　width:200px;
　　　　　　height:150px;
　　　　}
　 </style>
　 <script type="text/javascript">
　　　　window.onload = function () {
　　　　　　var cnv = document.getElementById("canvas");
　　　　　　var str = "canvas的寬度為：" + cnv.width + "，高度為：" + cnv.height; 
　　　　　　alert(str);
　　　　}
　 </script>
</head>
<body>
　 <canvas  ></canvas>
</body>
</html>

在瀏覽器中的預覽效果如圖1-8所示。

image


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

1.2.2　Canvas對象

在Canvas中，我們可以使用document.getElementById()方法來獲取canvas對象。canvas對象常用的屬性和方法如下：

image


也就是說，我們可以使用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 xmlns="https://www.w3.org/1999/xhtml">
<head>
　 <title></title>
　 <meta charset="utf-8" />
　 <script type="text/javascript">
　　　　window.onload = function () {
　　　　　　var cnv = document.getElementById("canvas");
　　　　　　var str = "Canvas的寬度為：" + cnv.width + "，高度為：" + cnv.height; 
　　　　　　alert(str);
　　　　}
　 </script>
</head>
<body>
　 <canvas  width="200" height="160" ></canvas>
</body>
</html>

在瀏覽器中的預覽效果如圖1-9所示。

image


本節要特別注意一點：以後學習的所有圖形的繪製，我們使用的都是context對象（上下文環境對象）的屬性和方法。

最後更新：2017-06-06 07:33:31

  上一篇：go  《Web前端開發精品課——HTML5 Canvas開發詳解》——導讀
  下一篇：go  怎樣健身最有效？程序員們可能還需要這些……