在HTML5中常用的兩種繪圖元素分別是什么？

親愛的提問朋友，html5中常用的兩種繪圖元素是：Canvas和SVG。

創(chuàng)新互聯(lián)2013年至今，先為五臺等服務(wù)建站，五臺等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為五臺企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

他們都是html5中支持在畫布上繪制圖形和放入圖片的。

Canvas 是H5新出來的標(biāo)簽canvas/canvas

Canvas畫布，利用JavaScript在網(wǎng)頁繪制圖像

在標(biāo)簽中給上寬高：canvas width="800" height="800"/canvas?

SVG 可縮放矢量圖形（Scalable Vector Graphics），基于可擴(kuò)展標(biāo)記語言XML? 出來的時(shí)間比較老

SVG 用來定義用于網(wǎng)格的基于矢量的圖形。

如何運(yùn)用HTML5畫圖

工具/材料

Sublime Text

01

首先要準(zhǔn)備一個(gè)畫布，如下圖所示，在HTML5中我們用canvas來表示畫布

02

然后我們在script腳本中獲取畫布對象，如下圖所示，運(yùn)用JS的getElementById方法即可

03

接下來我們通過畫布對象的getContext方法來獲取上下文2d對象，如下圖所示，我們要操作的內(nèi)容都在里面

04

然后我們給2d上下文填充背景色，如下圖所示，運(yùn)用上下文的fillStyle屬性即可

05

接下來，運(yùn)用上下文的fillRect方法來畫一個(gè)矩形，注意里面的四個(gè)值就是四個(gè)坐標(biāo)，如下圖所示

06

最后我們運(yùn)行界面程序，你會看到如下圖所示的紅色矩形樣例，你可要和上面的坐標(biāo)對應(yīng)一下

07

當(dāng)然2d上下文中還可以畫其他的圖形，如下圖所示的圓形，大家根據(jù)自己的需要應(yīng)用即可

如何在 HTML5 畫布上繪圖

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

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

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

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

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

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

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

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

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

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

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

//?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ù)步驟中，將在這個(gè) 500×500 的黑色畫布上繼續(xù)構(gòu)建。

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

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

這些方法采用兩個(gè)數(shù)字作為參數(shù)。第一個(gè)數(shù)字表示 x 軸坐標(biāo)，或者表示此坐標(biāo)定義的自畫布左側(cè)算起的像素?cái)?shù)。第二個(gè)數(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?方法，該方法采用兩個(gè)坐標(biāo)—曲線的一個(gè)控制點(diǎn)和一個(gè)端點(diǎn)。

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

myContext.moveTo(0,0);

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

myContext.stroke();

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

//?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();

若要?jiǎng)?chuàng)建一個(gè)圓，請使用?arc?方法：在設(shè)置用于繪制圓形輪廓的原點(diǎn)時(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)用中的多個(gè)線條，可以從上述線條的任意組合中繪制一個(gè) 2D 形狀。然后，整個(gè)形狀可以使用?fill?接收一種顏色。前面設(shè)置的筆劃樣式將創(chuàng)建白色線條，在與應(yīng)用于主體的紅色 (#f00) 合并時(shí)，該形狀將繼承雙色調(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ù)可將圖像縮放到指定的大小，甚至僅顯示圖像的一個(gè)片段，這對于實(shí)現(xiàn)滾動背景或使用子畫面表動態(tài)顯示子畫面等操作非常有用。

若要在屏幕上繪制位圖圖像而不進(jìn)行任何修改，請指定要用于左上角的 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)

若要縮放圖像，可在末尾添加兩個(gè)數(shù)字，分別代表寬度和高度。如果有幫助，不妨將后兩個(gè)數(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)

若要僅使用圖像的一個(gè)切片，則需要定義兩個(gè)矩形區(qū)域，對?drawImage?的調(diào)用提高到 9 個(gè)參數(shù)（第一個(gè)參數(shù)是 JavaScript 圖像對象）。要傳入的前四個(gè)數(shù)字表示圖像的切片。后四個(gè)數(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è)計(jì)程序中定義漸變的常見方式，都會喜歡使用 JavaScript 代碼定義漸變的簡單性。在設(shè)計(jì)程序中是選擇顏色，漸變中的顏色位置使用水平滑塊設(shè)置。JavaScript 中的唯一區(qū)別是使用從 0 到 1 范圍內(nèi)的小數(shù)值代替滑塊。

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

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

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

//?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 提供一個(gè)高度集成的外觀。有關(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?屬性定義兩個(gè)畫布元素重疊時(shí)會發(fā)生什么情況。 使用此屬性始終可以定義在源或新元素級別發(fā)生的情況?？梢詧?zhí)行的操作有顏色混合、遮蔽和更改重疊優(yōu)先級等。

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

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

當(dāng)前題目：html5畫圖,HTML5繪制圖形
本文URL：http://aaarwkj.com/article36/dsijosg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、動態(tài)網(wǎng)站、商城網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)

廣告

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