HTML5是今朝HTML的最新尺度。在筆者寫這篇文章時，HTML5仍在積極的成長。HTML5除了供給新的標簽信息外，同時還包含了新的應用軌范編程接口(API)，這樣可以使我們能夠在網(wǎng)頁上供給更多豐碩的多媒體和互動功能，而無需使用專有的插件。除了這些萬維網(wǎng)聯(lián)盟還發(fā)布了其他的相關手藝，好比地輿位置定位，脫機存儲，檔案打點等等。
在HTML5推出后，瀏覽器將會更像是一個操作系統(tǒng)，事實上谷歌的Chrome OS就是基于Chrome瀏覽器上運行各類收集應用軌范的操作系統(tǒng)。使用HTML5和其他相關手藝，我們就可以構(gòu)建應用軌范，恍惚傳統(tǒng)的桌面與WEB之間的分界線。
HTML5中的Canvas圖形元素
在這篇文章中筆者將對HTML5中新的新的canvas元素做一個簡單的描述。canvas可以讓我們能夠在瀏覽器上使用劇本繪制圖形。筆者將會經(jīng)由過程使用canvas元素教巨匠若何在瀏覽器上繪制一個簡單的三角形。在我們起頭之前，你必需知道今朝HTML5和其他相關的手藝只能被今朝最新版本的瀏覽器所兼容。你需要使用最新版本的火狐，Chrome，Safari 瀏覽器或者ie9。
什么是Canvas
canvas是html5的一個新的標簽，在頁面中界說該標簽的代碼如下
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 – Hello Triangle</title>
</head>
<body>
<canvas id=”canvas” width=”800″ height=”600″>
</canvas>
</body>
</html>
這一段短短的HTML5代碼還沒有做什么工作。接著我們將在畫布上繪制和獨霸元素。
畫布的設置
畫布上我們需要使用坐標系統(tǒng)。在畫布的左上角我們界說為坐標(0，0)，X坐標跟著畫布的寬度不竭增添，Y軸跟著畫布的高度不竭增添。基于我們本文的例子，X軸所年夜(0，0)到(800，0)的線，Y軸是年夜(0，0)到(0，600)的線。具體如下圖所示。
為了能夠進入畫布繪圖，我們需要先完成他的布景。具體我們可以使用下面的Javascript代碼。
var myCanvas = document.getElementById(“canvas”);
var ctx = myCanvas.getContext(“2d”);
此刻ctx就持有canvas元素的2D布景，可以在二維空間中作圖。我們將在膳縵沔繪制三角形。當然你會想我們可以不成以使用3D布景呢?謎底是今朝還不行，因為今朝還沒有一個統(tǒng)一尺度的3D布景，同時瀏覽器的撐持也很有限。
畫第一條直線
在我們畫第一條直線的時辰我們需要知道什么?首先我們需要知道兩個點，頗晡纏標(X1，Y1)和竣事坐標(X2，Y2)。畫線我們可以使用以下的代碼。
function drawLine(ctx, color, x1, y1, x2, y2){
ctx.beginPath();
ctx.strokeStyle=color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.closePath();
}
這些代碼是在2D的布景下。并使用擬定的顏色畫線。使用MOVETO()做為起點，lineTo()為終點繪制圖線。我們可以使用這些代碼繪制三角形的邊緣線。
繪制三角形
既然我們有畫線的代碼，那么繪制三角形就很輕易了。這里有繪制三條線的體例。
function drawTriangle(ctx, color, x1, y1, x2, y2, x3, y3){
drawLine(ctx, color, x1, y1, x2, y2);
drawLine(ctx, color, x2, y2, x3, y3);
drawLine(ctx, color, x3, y3, x1, y1);
}
接著我們就需要將這些線放置在一路，代碼如下：
function drawOnCanvas(){
var myCanvas = document.getElementById(“canvas”);
var ctx = myCanvas.getContext(“2d”);
drawTriangle(ctx, “#FF0000″, 10, 10, 10, 100, 100, 100);
}
下一步我們需要在標簽上做“onload”事務。
<body onLoad=”drawOnCanvas();”>
最后我們保留為HTML文件，然后就可以在瀏覽器中查看到以下的結(jié)不美觀。
總結(jié)：
本文是對HTML5的canvas元素的一個很簡短的簡介。HTML5中還有良多元素我們沒有繼續(xù)試探與體味。我們需要不竭的進修與體味，但愿本文對于巨匠體味HTML5有所輔佐。本文由九牧王官方旗艦店 http://www.jiumw.com/ 原創(chuàng)，轉(zhuǎn)載請保留鏈接，感謝!
網(wǎng)友點評
精彩導讀
科技快報
品牌展示