本文提供了HTML5的畫布基本用法的概述。概述被分成兩部分:
- 宣告一個HTML5 canvas元素。
- 繪圖畫布元素的圖形。
宣告canvas元素
首先,讓我們來看看如何在一個HTML頁面宣告canvas元素:
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;"> HTML5 Canvas not supported </canvas>
上面的程式碼宣告瞭一個帆布
帶元素的寬度
設定為500,高度
設定為150,和樣式
設定為顏色1畫素邊框#CCCCCC
。
裡面的文字畫布
元素將被忽略,如果瀏覽器支援HTML5的Canvas元素。如果不支援HTML5的畫布元素,文字可能會被顯示為在瀏覽器的普通文字。
你應該把畫布的HTML程式碼在你的網頁在您想要在畫布可見的位置。就像任何其他的HTML元素(如DIV
元素)。
在Canvas元素繪製圖形
繪製一個HTML5畫布上的圖形繪製在立即模式。直接模式意味著,只要你畫的形狀在畫布上,在畫布不再知道該形狀什麼。形狀是可見的,但你不能單獨操作的形狀。它像一個真正的帆布畫。塗一次,你就只剩下了彩色顏料/畫素。
這是違背SVG,在那裡你可以單獨操作的形狀,並有全圖重新繪製。在HTML5中,你將不得不重新繪製自己的一切,如果你想改變的繪製圖。
一個HTML5 canvas元素使用JavaScript完成的畫圖,按照下列步驟:
- 等待頁面被完全載入。
- 獲取引用canvas元素。
- 獲得canvas元素2D背景的。
- 繪製2D使用環境的抽獎功能的圖形。
下面是一個簡單的程式碼示例,說明上述步驟:
<script> // 1. wait for the page to be fully loaded. window.onload = function() { drawExamples(); } function drawExamples(){ // 2. Obtain a reference to the canvas element. var canvas = document.getElementById("ex1"); // 3. Obtain a 2D context from the canvas element. var context = canvas.getContext("2d"); // 4. Draw graphics. context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); } </script>
首先,事件偵聽器功能被連線到視窗。當網頁載入此事件偵聽器的功能被執行。此函式呼叫我定義另一個函式,稱為drawExamples()
。
二,drawExamples()
函式中,使用所引用canvas元素的document.getElementById()
函式,將ID
canvas元素,如在canvas元素的宣告中定義。
三,drawExamples()
函式獲取對從畫布元素的2D背景下,通過呼叫canvas.getContext(“2D”)
以前獲得的canvas元素上。
四,()drawExamples
函式呼叫各種繪圖功能的2D上下文物件,從而導致圖形上被繪製在畫布上。
下面是執行程式碼時的外觀: