介紹 · ZetCode 中文系列教程

# 介紹 > 原文： [https://zetcode.com/gfx/html5canvas/introduction/](https://zetcode.com/gfx/html5canvas/introduction/) HTML5 畫布教程的這一部分是對 JavaScript 語言的 HTML5 畫布編程的介紹。 ## 關于這是 HTML5 畫布教程。它是針對初學者的。本教程將教您 HTML5 `canvas`元素的 JavaScript 圖形編程基礎。可以在此處下載本教程中使用的圖像。 HTML5 畫布元素提供了可同時處理矢量和柵格圖形的工具。 ## HTML5 畫布 HTML5 `canvas`元素提供了一個與分辨率有關的位圖區域，該區域可用于動態繪制圖形，游戲圖形，藝術作品或其他可視圖像。簡單來說，`canvas`是 HTML5 中的新元素，它使您可以使用 JavaScript 繪制圖形。 `Canvas`無需將插件插入 Flash，Silverlight 或 Java，即可將動畫帶入網頁。 HTML5 `canvas`最初由 Apple 于 2004 年推出，用于 Mac OS X WebKit，以為儀表板應用及其 Safari Web 瀏覽器提供動力。從那時起，它已被 Mozilla 和 Opera 所采用。后來，W3C 在 HTML5 規范中采用了它。如今，所有現代 Web 瀏覽器都支持它。 ## 畫布上下文 `canvas`上下文是一個對象，它公開畫布 API 來執行繪圖。它提供對象，方法和屬性，以在畫布繪圖表面上繪制和操縱圖形。使用`getContext()`方法檢索上下文。方法的參數指定所需的 API：用于二維圖形的`"2d"`或用于二維和三維圖形的`"webgl"`。如果不支持給定的上下文 ID，則返回`null`。 ## 畫一個矩形我們創建一個簡單的 HTML5 `canvas`圖形渲染示例。 `rectangle.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas rectangle</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "cadetblue"; ctx.fillRect(0, 0, 100, 100); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="250" height="150"> </canvas> </body> </html> ``` 該代碼示例在網頁的左上角繪制一個`cadetblue`矩形。 ```js <!DOCTYPE html> ``` 文檔類型聲明或`DOCTYPE`是對 Web 瀏覽器的有關 HTML 文檔性質的指令。這個特定的聲明告訴瀏覽器該網頁是 HTML5 文檔。 `canvas`元素最初是在 HTML5 標準中引入的。 ```js <script> function draw() { ... } </script> ``` 在自定義`draw()`函數中執行繪制。加載 HTML 文檔的正文時會調用它。 ```js var canvas = document.getElementById('myCanvas'); ``` 通過`getElementById()`方法，我們獲得對`canvas`元素的引用。 ```js var ctx = canvas.getContext('2d'); ``` 使用`getContext()`方法檢索渲染上下文。 ```js ctx.fillStyle = "cadetblue"; ``` 上下文的`fillStyle`屬性指定在內部形狀中使用的顏色或樣式。然后在后續的繪圖操作中使用該樣式。 ```js ctx.fillRect(0, 0, 100, 100); ``` 我們用指定的顏色繪制一個矩形。矩形的大小在方法的參數中給出。前兩個參數是 x 和 y 坐標。接下來的兩個參數是矩形的寬度和高度。 ```js <body onload="draw();"> ``` `onload`屬性為窗口的加載事件定義事件處理器。加載事件在文檔加載過程結束時觸發。至此，文檔中的所有對象都在 DOM 中，并且所有圖像，腳本，鏈接和子框架均已完成加載。在我們的例子中，我們調用`draw()`方法，該方法在畫布上執行繪制。 ```js <canvas id="myCanvas" width="250" height="150"> </canvas> ``` `canvas`元素是使用`<canvas>`和`</canvas>`標簽創建的。 `width`和`height`屬性設置頁面內 canvas 元素的大小。 `id`屬性標識 DOM 層次結構中的元素。 ![HTML5 canvas rectangle](https://img.kancloud.cn/9d/e3/9de3241531f252bf8b99d1ee5dfd2bc7_302x238.jpg) 圖：HTML5 畫布矩形 ## 陰影 HTML5 畫布包含用于創建陰影的屬性。 `shadow.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas shadow</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 4; ctx.shadowColor = "#888"; ctx.fillStyle = "#000000"; ctx.fillRect(10, 10, 80, 80); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="250" height="150"> </canvas> </body> </html> ``` 在示例中，我們在矩形下方創建陰影。 ```js ctx.shadowOffsetX = 5; ``` `shadowOffsetX`屬性指定陰影在水平方向上偏移的距離。 ```js ctx.shadowOffsetY = 5; ``` `shadowOffsetY`屬性指定陰影在垂直方向上將偏移的距離。 ```js ctx.shadowBlur = 4; ``` `shadowBlur`屬性指定模糊效果的級別。 ```js ctx.shadowColor = "#888"; ``` `shadowColor`屬性指定陰影的顏色。 ![HTML5 canvas shadow](https://img.kancloud.cn/f5/91/f591e3944b25be5598f7f5452b1dd0e6_302x238.jpg) 圖：HTML5 畫布陰影 ## 參考以下資源用于創建本教程： * [Wikipedia 上的`canvas`元素](https://en.wikipedia.org/wiki/Canvas_element)文章。 * [developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) HTML5 畫布教程的這一部分是對 HTML5 畫布的 JavaScript 編程的介紹。