|
< canvas>標(biāo)簽,。它就是一塊用來繪畫的空白平面。需要使用JavaScript在這塊畫布上進行操作和繪畫,。 可以為canvas元素賦予一個id屬性,，這樣就能通過JavaScript代碼以編程的方式訪問它,。 如果你正在使用jQuery，并且在頁面上只有一個canvas,，你可以使用$(‘canvas’)來訪問它,，而不用為它命名。 也可以為canvas指定height（高度）和width（寬度）,，但這不是必需的,。 在< canvas> 和< /canvas>標(biāo)簽之間，還可以指定一些文本,，顯示在不支持canvas元素的瀏覽器中,。 下面是使用canvas進行繪畫的一個簡單例子。（畫一張?zhí)K格蘭國旗） <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Draw blue rectangle ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Draw white X ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html> 現(xiàn)在從頭到尾分析一下代碼,。 首先,，創(chuàng)建了一塊畫布（canvas），并為它賦予了一個ID叫“myCanvas”,。如果運行這段代碼的瀏覽器不支持canvas元素,，它就會在旗幟原本要出現(xiàn)的位置顯示“Your browser does not support the canvas tag”。 接下來,，編寫了一段腳本,。記住，canvas標(biāo)簽只是一個用來畫圖的容器,，必須用JavaScript來畫圖并將其呈現(xiàn)出來,。 首先通過使用ID“myCanvas”獲得了對canvas的一個引用； 然后得到canvas的上下文,。 上下文所提供的方法和屬性,，都可以用來在canvas上操作圖形和進行繪畫。 這里指定了參數(shù)“2d”,，表示將在2維的環(huán)境中來進行繪畫,。 第三步，完成藍(lán)色矩形的繪畫,。 用fillStyle方法指定了矩形的顏色為藍(lán)色， 再用fillRect方法畫出了矩形,， 后者的參數(shù)指定了矩形的大小與位置,。 fillRect(0, 0, 125, 75)表示：從左上角的頂點（0,0）開始畫一個矩形，寬為125像素,，高為75像素,。 最后，在旗幟上畫出了一個白色的“X”,。 首先調(diào)用beginPath方法啟動畫路徑的進程,。指定的lineWidth屬性值（也就是路徑的寬度）為15像素,。另一個屬性strokeStyle則被指定為“white”，以表示路徑顏色為白色,。 接下來,，依靠moveTo和lineTo兩個方法描繪出了整個路徑。 這兩個方法都會定位出一個用來繪圖的光標(biāo),，其區(qū)別在于：前者移動光標(biāo)的時候不會畫出一條線,，而后者在移動的同時會畫線。 在畫X的過程中,，首先從（0,0）——左上角開始,，然后畫一條線到（125,75）——右下角。接著把光標(biāo)移到（125,0）——右上角,，一筆畫到（0,75）——左下角,。 最后的stroke方法將真正地呈現(xiàn)這些筆畫。 canvas與SVG的簡單對比 可縮放矢量圖形（Scalable Vector Graphics,，簡稱SVG）是在瀏覽器窗口進行繪畫的一個早期標(biāo)準(zhǔn),。隨著HTML5的canvas的發(fā)布，許多人都想知道它們之間到底孰優(yōu)孰劣,。 它們之間最大的區(qū)別就是：canvas使用立即呈現(xiàn)模式,，而SVG使用保留呈現(xiàn)模式。 canvas可以讓所畫的圖形立即呈現(xiàn)在顯示器里,。在上面給出的代碼中,，一旦旗幟畫完，系統(tǒng)就會“忘掉”它,，且不會有任何狀態(tài)保留下來,。如果對它進行改動，將會導(dǎo)致徹底的重畫,。 與之相比,，SVG保留了所呈現(xiàn)對象的一個完整模型。要對圖做出改動時,，你只需要指出改動的地方（例如矩形的新位置）,，瀏覽器來負(fù)責(zé)呈現(xiàn)新的圖形。這節(jié)省了開發(fā)人員的工作,，但也為維護模塊付出了性能上的代價,。 能夠同時通過CSS和JavaScript來進行設(shè)計，是SVG另一個值得稱道的優(yōu)點,。 與之相比,，canvas只能通過JavaScript來進行操作。
|
|
|
