原文：http://www.csser.com/dev/274.html

HTML5?canvas?即HTML5畫布，是一個現代瀏覽器都支持的HTML5非插件繪圖的功能，本文將展示如何通過HTML5?canvas?API操作canvas元素、繪制圖形、改變繪圖顏色以及刪除圖形，讓我們開始進入這很酷的新技術的短暫旅行吧。

canvas元素簡介

使用canvas元素相當簡單，它只是一個單純的HTML標簽，外加寬高兩個特性。

<canvas?width="500"?height="500"> <!--?在這里插入向后兼容的內容，不支持canvas的瀏覽器可以解析和顯示?--> </canvas>

上面的代碼在頁面中插入了一個透明的畫布，canvas元素內部的內容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶提供的信息，聯想下<noscript>元素就可以。

瀏覽器支持

很重要的一點就是瀏覽器對canvas的支持還是相當不錯的，所有現代瀏覽器都支持它，包括最新版的IE9：

Internet?Explorer?9.0+
Safari?3.0+
Firefox?3.0+
Chrome?3.0+
Opera?10.0+
iOS?1.0+
Android?1.0+

有趣的是，你可以在IE8以及更低版本的IE瀏覽器下使用canvas功能，借助ExplorerCanvas?插件。

畫布尺寸

當定義canvas元素的尺寸時，最好通過HTML設置它的width和height特性，因為通過CSS設置寬高會導致畫布按比例縮放到你設置的值，這背后有它的邏輯原因：在canvas元素的內部存在一個名為2d渲染環境（2d?redering?context）的對象，所以，通過CSS設置畫布尺寸會引起奇怪的效果。

探索2d?渲染環境

我們上面提到的canvas元素只是canvas功能的一部分，另一部分是2d渲染環境，它可以讓你實現很酷的看得到的東西。

需要完全理清的是：當你使用canvas，你不是在canvas元素上畫圖，事實上你是在canvas元素內部的2d渲染環境上。

坐標系統

如果你曾經使用過2d繪圖編程語言（比如ActionScript、Processing等），你應該會了解基于屏幕（screen-based）的坐標系統。canvas內部的2d渲染環境并沒有什么不同之處，它采用標準的笛卡爾坐標系統，原點位于屏幕左上角，向右移動會增加x坐標的值，向下移動會增加y坐標的值，很容易理解。

通常坐標系統的單位是屏幕的1像素。

操作2d渲染環境

需要利用Javascript提供的API來獲取2d渲染環境對象，該方法為：getContext()，看下簡單的例子：

<canvas?id="csser-com-Canvas"?width="500"?height="500"><!--?向后兼容的內容?--> </canvas> <script> var?canvas?=?document.getElementById("csser-com-Canvas"); var?c?=?canvas.getContext("2d"); </script>

通過調用canvas對象的getContext()方法，c變量就包含了指向2d渲染環境的引用，這意味著你現在已經完成了在畫布上繪圖的一切準備，接下來可以開始繪圖了。

繪制矩形

獲得了2d渲染環境對象，就可以通過調用API提供的大量方法來進行繪圖了，一個最基本的方法就是fillRect()，通過它可以繪制一個填充顏色的矩形（顏色默認值為黑色）。

在c變量的下面增加以下代碼：

c.fillRect(0,?0,?50,?50);

這將在畫布左上角繪制繪制一個黑色背景的正方形：

在調用fillRect()方法時傳入了4個參數：

• 第一個是基于原點的x坐標位置
• 第二個是基于原點的y坐標位置
• 第三個是寬度
• 第四個是高度

fillRect的偽代碼看起來應該像這個樣子：

c.fillRect(x,?y,?width,?height);

很酷的是，不僅可以繪制填充的矩形，你還可以繪制線框矩形，使用strokeRect()方法，繪制四周產生描邊效果的矩形，如：

c.strokeRect(50,?50,?100,?100);

strokeRect的參數與fillRect是一致的，繪制的結果如下：

利用canvas繪圖，簡單、優美，所有的方法都很易懂，但是當放在一起使用可以讓你畫出很漂亮的圖形。

繪制路徑

矩形是唯一一個可以通過單個API方法繪制的圖形，先把它放在一邊，我們來學習下路徑（Paths）繪制。使用路徑，可以繪制線條、連續的曲線以及復合圖形。

繪制一個簡單的路徑需要利用一些AIP方法：

beginPath?開始一個新路徑
moveTo?移動路徑的繪圖起點
lineTo?從moveTo定義的點開始繪制連續的路徑，或者從上一次的lineTo的終點開始繪制。
closePath?連接最后的點和最初的點并關閉路徑繪制
fill?用顏色填充路徑
stroke?描變路徑

嘗試執行下面的代碼：

c.beginPath(); c.moveTo(50,?50); c.lineTo(50,?250); c.lineTo(250,?250); c.closePath; c.fill();

執行結果為：

你可以用同樣的方法繪制你希望的圖形，canvas還包含更高級的路徑繪制，比如圓弧（可以繪制圓形）和貝塞爾曲線（用于繪制很酷的曲線效果），總之，繪制路徑要比繪制矩形復雜的多。

改變顏色

到目前為止，我們的示例所繪制的都是填充或描邊的黑色，canvas也提供了一些屬性用于改變繪制圖形的顏色，它們是fillStyle和strokeStyle，它們的語法都是可以自解釋的，所以我們直接來改變一個矩形的填充顏色：

c.fillStyle?=?"rgb(255,?0,?0)"; c.fillRect(50,?50,?100,?100);

結果：

或者，你可以改變描邊的顏色：

c.strokeStyle?=?"rgb(255,?0,?0)"; c.strokeRect(50,?50,?100,?100);

結果：

fillStyle和strokeStyle屬性很漂亮的一點就是，它們都支持普通CSS顏色值，這意味著你可以使用RGB、RGBA、HSA、顏色名稱以及十六進制顏色值。

還有一點需要指出的是，改變畫布中的顏色值不會影響已經繪制的任何圖形，例如，如果你繪制了一個黑色的矩形，然后設置填充為紅色，接著繪制了另一個矩形，這時第一個矩形仍然為黑色。

改變線寬

除了可以改變顏色，還可以利用lineWidth屬性改變描邊線條的寬度，按照上面的例子，改變線條寬度：

c.lineWidth?=?20; c.strokeStyle?=?"#f00"; c.strokeRect(50,?50,?100,?100);

結果：

同樣的可以改變路徑的線寬：

c.lineWidth?=?20; c.beginPath(); c.moveTo(50,?50); c.lineTo(50,?250); c.lineTo(250,?250); c.closePath(); c.stroke();

結果：

還有一些其它的改變線條的方式，比如lineCap設置線條的末端，lineJoin設置線條的角。

刪除圖形

最后我們來了解下如何刪除已經繪制的圖形，刪除圖形只需Javascript?API提供的一個名為clearRect的方法，其原理是使參數指定的矩形區域背景變為透明。

本文示例畫布長寬分別為500像素，要想刪除整個畫布圖形，可以這樣做：

c.fillRect(50,?50,?100,?100); c.clearRect(0,?0,?500,?500);

上面的代碼執行后，你會什么都看不到，事實上填充的矩形已經繪制，只是瞬間被刪除了，所以你看不到它。

如果你不清楚畫布的具體寬高，清除整個畫布可以這樣：

c.clearRect(0,?0,?canvas.width,?canvas.height);

刪除畫布中的區域

如果你不想刪除整個畫布的圖形，而僅僅刪除畫布中的一個區域，假如，你繪制了一個黑色的正方形，旁邊繪制了一個紅色的正方形：

c.fillRect(50,?50,?100,?100); c.fillStyle?=?"#f00"; c.fillRect(200,?50,?100,?100);

看起來是這個樣子：

接下來你可以通過clearRect刪除黑色背景的正方形而只保留紅色正方形：

c.clearRect(50,?50,?100,?100);

注意傳入clearRect的參數能確保能覆蓋要被刪除的圖形的區域。

結語

canvas易于使用、上手快速，并且強大的要死（唉，自己翻譯的文章自己不敢讀，太拗口了）

轉載于:https://www.cnblogs.com/myssh/archive/2011/11/24/2261901.html

總結

以上是生活随笔為你收集整理的HTML5 canvas 初级入门教程【转】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。