h5是什么?

h5是HTML5的簡稱。HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)金安,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。

h5特性

1、繪圖畫布

HTML5的canvas元素可以實現(xiàn)畫布功能，該元素通過自帶的API結(jié)合使用JavaScript腳本語言在網(wǎng)頁上繪制圖形和處理，擁有實現(xiàn)繪制線條、弧線以及矩形，用樣式和顏色填充區(qū)域，書寫樣式化文本，以及添加圖像的方法，且使用JavaScript可以控制其每一個像素。

2、多媒體

HTML5最大特色之一就是支持音頻視頻，在通過增加了＜audio、＜video兩個標(biāo)簽來實現(xiàn)對多媒體中的音頻、視頻使用的支持，只要在Web網(wǎng)頁中嵌入這兩個標(biāo)簽，而無需第三方插件（如Flash）就可以實現(xiàn)音視頻的播放功能。

如何在 HTML5 畫布上繪圖

步驟 1: 在 HTML 中設(shè)置畫布，創(chuàng)建一個引用，并獲取上下文對象

畫布在 HTML 中通過 canvas 標(biāo)簽定義。與其他標(biāo)簽類似，canvas 的屬性（如寬度和高度）作為特性輸入。假設(shè)你希望創(chuàng)建一個寬 500 像素、高 500 像素的畫布，并將其命名為“can1”，稍后在 JavaScript 中引用它時將用到。

在 HTML 文檔中輸入 canvas 標(biāo)簽。

canvas?id="can1"?width="500"?height="500"/canvas

在 JavaScript 文檔中，創(chuàng)建一個變量，在編寫腳本時該變量將代替“can1”。這里，我們將該變量命名為“myCanvas”，并使用?getElementById?將其鏈接到“can1”。

var?myCanvas?=?document.getElementById("can1");

畫布的?CanvasRenderingContext2D?對象具有操作畫布的所有命令。 這里，在上下文對象中檢索“can1”。將此變量稱為“myContext”。

var?myContext?=?myCanvas.getContext("2d");

步驟 2: 繪制矩形、直線、貝塞爾曲線、圓和形狀

在畫布上繪制簡單的線條非常容易。使用 JavaScript 的?moveTo?方法可設(shè)置線條開始位置的坐標(biāo)。然后只需使用另一方法設(shè)置終點。 第二步可以使用若干方法，每種方法專用于幫助呈現(xiàn)一種不同的線型，無論是直線、貝塞爾曲線還是圓弧。若要將線條合并為形狀，可以閉合對?beginPath?和?closePath?方法調(diào)用中的線條。在指定所需的外觀之后，可以使用?fill?方法應(yīng)用顏色，并使用?stroke?方法執(zhí)行線條和形狀的呈現(xiàn)。

應(yīng)用一些基本風(fēng)格。這里，通過使用?fillStyle?屬性繪制一個黑色矩形，將畫布背景設(shè)置為黑色 (#000)。然后使用?strokeStyle?屬性將線條顏色設(shè)置為白色 (#fff)，使用?fillRect?方法應(yīng)用黑色背景，并使用?lineWidth?屬性將線條的粗細(xì)設(shè)置為 3 個像素。

//?Specify?a?black?background,?and?white?lines?that?are?3?pixels?thick.

myContext.fillStyle???=?'#000';

myContext.strokeStyle?=?'#fff';

myContext.fillRect(0,0,500,500);

myContext.lineWidth??=?3;myContext.fill();

在后續(xù)步驟中，將在這個 500×500 的黑色畫布上繼續(xù)構(gòu)建。

現(xiàn)在，準(zhǔn)備在畫布的黑色表面繪制一個白色線條。先從直線開始。

使用?moveTo?方法設(shè)置直線的起點，使用?lineTo?方法設(shè)置終點。

這些方法采用兩個數(shù)字作為參數(shù)。第一個數(shù)字表示 x 軸坐標(biāo)，或者表示此坐標(biāo)定義的自畫布左側(cè)算起的像素數(shù)。第二個數(shù)字是從頂部開始測量的 y 軸坐標(biāo)。

//?Draw?a?line?that?starts?at?the?upper?left?corner?of?the?canvas?and?ends?at?the?lower?right.?

myContext.moveTo(0,0);

myContext.lineTo(500,500);

myContext.stroke();

若要繪制二次貝塞爾曲線，請使用?quadraticCurveTo?方法，該方法采用兩個坐標(biāo)—曲線的一個控制點和一個端點。

//?Draw?a?swooping?curve?that?spans?the?width?of?the?canvas.

myContext.moveTo(0,0);

myContext.quadraticCurveTo(0,500,500,250);

myContext.stroke();

若要繪制三次貝塞爾曲線，請使用?bezierCurveTo?方法，該方法采用三個坐標(biāo)—曲線的兩個控制點和一個端點。

//?Draw?a?V-shaped?Bezier?curve?that?spans?the?entire?canvas.

myContext.moveTo(0,0);

myContext.bezierCurveTo(500,?820,?0,?500,?500,?0);

myContext.stroke();

若要創(chuàng)建一個圓，請使用?arc?方法：在設(shè)置用于繪制圓形輪廓的原點時，請確保將?moveTo?方法設(shè)置在沿線條路徑的位置上，否則圓上將有一條通向?moveTo坐標(biāo)的“尾巴”。

//?Draw?a?circle?that?spans?the?width?of?the?canvas.

myContext.moveTo(500,250);

myContext.arc(250,250,250,0,Math.PI*2,true);

myContext.stroke();

通過閉合對?beginPath?和?closePath?調(diào)用中的多個線條，可以從上述線條的任意組合中繪制一個 2D 形狀。然后，整個形狀可以使用?fill?接收一種顏色。前面設(shè)置的筆劃樣式將創(chuàng)建白色線條，在與應(yīng)用于主體的紅色 (#f00) 合并時，該形狀將繼承雙色調(diào)外觀。

//??Draw?a?red?diamond?that?spans?the?entire?canvas.

myContext.fillStyle?=?'#f00';

myContext.beginPath();

myContext.moveTo(250,0);

myContext.lineTo(0,250);

myContext.lineTo(250,500);

myContext.lineTo(500,250);

myContext.closePath();

myContext.fill();

步驟 3: 顯示位圖圖像

位圖圖像（如 .jpg、.png 和 .gif 文件）可以放置在畫布上，甚至可以在代碼中縮放和裁剪，不會觸及原始文件。若要添加位圖圖像，請指定該圖像的 URI，然后使用?drawImage?方法在畫布上指定其位置。使用可選參數(shù)可將圖像縮放到指定的大小，甚至僅顯示圖像的一個片段，這對于實現(xiàn)滾動背景或使用子畫面表動態(tài)顯示子畫面等操作非常有用。

若要在屏幕上繪制位圖圖像而不進行任何修改，請指定要用于左上角的 x 坐標(biāo)和 y 坐標(biāo)。

//?Draw?an?image?at?the?upper?left?corner?of?the?canvas?(0,?0).

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0)

若要縮放圖像，可在末尾添加兩個數(shù)字，分別代表寬度和高度。如果有幫助，不妨將后兩個數(shù)字視為“右部”和“底部”，而不是“寬度”和“高度”。

//?Scale?the?image?to?span?the?entire?500?x?500?canvas.

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0,?500,?500)

若要僅使用圖像的一個切片，則需要定義兩個矩形區(qū)域，對?drawImage?的調(diào)用提高到 9 個參數(shù)（第一個參數(shù)是 JavaScript 圖像對象）。要傳入的前四個數(shù)字表示圖像的切片。后四個數(shù)字表示要顯示該切片的畫布區(qū)域。

//?Take?a?20?x?20?slice?from?the?upper?left?of?the?image?and?scale?it?to?span?the?entire?500?x?500?canvas.

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0,?20,?20,?0,?0,?500,?500);

步驟 4: 漸變

任何人只要熟悉在圖形設(shè)計程序中定義漸變的常見方式，都會喜歡使用 JavaScript 代碼定義漸變的簡單性。在設(shè)計程序中是選擇顏色，漸變中的顏色位置使用水平滑塊設(shè)置。JavaScript 中的唯一區(qū)別是使用從 0 到 1 范圍內(nèi)的小數(shù)值代替滑塊。

在設(shè)計程序中，線性漸變使用線條在圖像上定位，線條的開始和結(jié)束位置確定方向和縮放級別。在 JavaScript 中，該線條使用兩對 x、y 軸坐標(biāo)繪制。然后將 4 個數(shù)字傳遞到?createLinearGradient?方法以創(chuàng)建?CanvasGradient?對象。在定義漸變對象的屬性之后，就會得到所需的漸變，CanvasGradient?作為?fillStyle?傳遞到?fillRect?方法進行呈現(xiàn)。

//?Render?a?white,?red?and?black?gradient?diagonally?across?the?canvas.

var?myGradient?=?myContext.createLinearGradient(0,0,?500,500);?//?gradient?starts?at?upper?left?and?ends?at?lower?right

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");??//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;???//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);???//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

徑向漸變的定義方式稍有不同。為漸變的起點和終點繪制兩對 x、y 軸坐標(biāo)—，這與線性漸變中一樣—，但每個坐標(biāo)對都有第三個與其關(guān)聯(lián)的 z 軸坐標(biāo)，用于定義半徑。可以想像為圍繞一個坐標(biāo)繪制一個圓，該坐標(biāo)位于中心 (250, 250)，繪制的圓的大小以像素為單位定義。這樣定義兩個圓之后，一個圓較小，一個圓跨整個畫布，有 6 個數(shù)字傳遞到?createRadialGradient。在呈現(xiàn)時，徑向漸變在兩個圓之間的空間中繪制，顏色等級與圓的半徑的大小成正比。

//?Render?a?white,?red?and?black?radial?gradient?spanning?the?canvas.

var?myGradient?=?myContext.createRadialGradient(250,250,0,?250,250,500);?//?gradient?is?centered?and?spans?the?entire?canvas?

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");??//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");???//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;????//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);????//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

步驟 5: 動畫

可以使用多種方法繪制動畫。

對于畫布內(nèi)的元素，JavaScript 提供了?setInterval?方法，該方法計劃一個重復(fù)調(diào)用的函數(shù)，每經(jīng)過定義的時間間隔便調(diào)用一次該函數(shù)。在該函數(shù)中，需要重繪畫布來反映對其上呈現(xiàn)的對象的更改。下面是一個示例，其中一個函數(shù)初始化該動畫，將呈現(xiàn)頻率計劃為大約每秒 60 幀（每 13.33 毫秒一幀），并且重復(fù)調(diào)用該函數(shù)將重繪畫布。在本例中，徑向漸變從一個小點逐漸增大，直到填充整個畫布。

//?Generate?an?animation?of?a?growing?gradient.

//?These?variables?must?exist?globally?so?both?functions?can?access?them.

var?myCanvas;?

var?myContext;

var?outerBoundary?=?0,?innerBoundary?=?0;

//?Start?the?animation.

window.onload?=?initialize;

function?initialize()?{

myCanvas?=?document.getElementById("can1");

myContext?=?myCanvas.getContext("2d");

setInterval("redrawCanvas()",13);????//?redraw?@?approximately?60?frames?per?second

}????????????????????????????????????????

//?Run?the?animation.???????????????????

function?redrawCanvas()?{??????????????

if?(outerBoundary??500)?{????????????

outerBoundary++;?????????????//?grow?the?size?of?the?gradient

}?else?{?????????????????????????????

innerBoundary++;?????????????//?grow?the?size?of?the?inner?white?circle?if?red?is?maxed

}????????????????????????????????????

var?myGradient?=?myContext.createRadialGradient(250,250,innerBoundary,?250,250,outerBoundary);

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");?//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");???//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;????//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);?????//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

}

CSS3 轉(zhuǎn)換和動畫可用于轉(zhuǎn)換畫布本身和畫布外部的對象。

此外，新的 WinJS 庫有許多高度優(yōu)化的動畫，創(chuàng)建這些動畫是為了模擬原有 Windows 動畫的行為。 WinJS 動畫有助于為你的應(yīng)用 UI 提供一個高度集成的外觀。有關(guān)詳細(xì)信息，請參閱WinJS.UI.Animation 命名空間。

步驟 6: 更多 HTML5 畫布提示

可以使用一系列屬性（shadowColor、shadowBlur、shadowOffsetX?和?shadowOffsetY）應(yīng)用陰影。

可以使用?createPattern?方法作為一種模式重復(fù)畫布中的元素。

可以使用?save?方法保存畫布狀態(tài)，然后執(zhí)行更改，再使用?restore?方法還原以前的狀態(tài)。該方法很好用，函數(shù)甚至不需要采用參數(shù)。

可以使用?globalCompositeOperation?屬性定義兩個畫布元素重疊時會發(fā)生什么情況。 使用此屬性始終可以定義在源或新元素級別發(fā)生的情況?？梢詧?zhí)行的操作有顏色混合、遮蔽和更改重疊優(yōu)先級等。

注意??globalCompositeOperation?主題使用源表示新元素，使用目標(biāo)表示以前存在的元素。

可以使用?strokeText?方法將文本添加到畫布。

HTML5用canvas怎么實現(xiàn)動畫效果

使用HTML5畫布能夠幫助我們快速實現(xiàn)簡單的動畫效果，基本原理如下：

每隔一定時間繪制圖形并且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來刷新需要繪制的圖形

首先是繪制圖形的方法，如下：

function myAnimation() {

ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon 0 || x_icon canvas_size_x - size_x) {

stepX = -stepX;

}

if (y_icon 0 || y_icon canvas_size_y - size_y) {

stepY = -stepY;

}

x_icon += stepX;

y_icon += stepY;

ctx.drawImage(anim_img, x_icon, y_icon);

}

以上方法每隔一定時間清除畫布內(nèi)容，并且重新計算繪制圖形位置，一旦超過了畫布大小，則反轉(zhuǎn)坐標(biāo)繪制圖形。

下面是實際繪制圖形方法：

function draw() {

var canvas = document.getElementById("canvas");

ctx = canvas.getContext("2d");

anim_img = new Image(size_x, size_y);

anim_img.onload = function() {

setInterval('myAnimation()', 5);

}

anim_img.src = '';

}

以上方法將圖形定義，并且調(diào)用實際繪制動畫的方法，搞定！

如果大家對于HTML5繪制動畫有興趣，或者希望了解如何模擬物理動畫效果，請閱讀下面的互動教程，相信能夠幫助你更好理解HTML畫布：

附上出處鏈接：

新聞標(biāo)題：html5畫布,html5畫布添加照片
文章路徑：http://www.rwnh.cn/article20/dscopco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、建站公司、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)