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

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

創新互聯2013年至今，先為五臺等服務建站，五臺等地企業，進行企業商務咨詢服務。為五臺企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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

Canvas 是H5新出來的標簽canvas/canvas

Canvas畫布，利用JavaScript在網頁繪制圖像

在標簽中給上寬高：canvas width="800" height="800"/canvas?

SVG 可縮放矢量圖形（Scalable Vector Graphics），基于可擴展標記語言XML? 出來的時間比較老

SVG 用來定義用于網格的基于矢量的圖形。

如何運用HTML5畫圖

工具/材料

Sublime Text

01

首先要準備一個畫布，如下圖所示，在HTML5中我們用canvas來表示畫布

02

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

03

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

04

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

05

接下來，運用上下文的fillRect方法來畫一個矩形，注意里面的四個值就是四個坐標，如下圖所示

06

最后我們運行界面程序，你會看到如下圖所示的紅色矩形樣例，你可要和上面的坐標對應一下

07

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

如何在 HTML5 畫布上繪圖

步驟 1: 在 HTML 中設置畫布，創建一個引用，并獲取上下文對象

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

在 HTML 文檔中輸入 canvas 標簽。

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

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

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

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

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

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

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

應用一些基本風格。這里，通過使用?fillStyle?屬性繪制一個黑色矩形，將畫布背景設置為黑色 (#000)。然后使用?strokeStyle?屬性將線條顏色設置為白色 (#fff)，使用?fillRect?方法應用黑色背景，并使用?lineWidth?屬性將線條的粗細設置為 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();

在后續步驟中，將在這個 500×500 的黑色畫布上繼續構建。

現在，準備在畫布的黑色表面繪制一個白色線條。先從直線開始。

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

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

//?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?方法，該方法采用兩個坐標—曲線的一個控制點和一個端點。

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

myContext.moveTo(0,0);

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

myContext.stroke();

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

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

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

//?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?調用中的多個線條，可以從上述線條的任意組合中繪制一個 2D 形狀。然后，整個形狀可以使用?fill?接收一種顏色。前面設置的筆劃樣式將創建白色線條，在與應用于主體的紅色 (#f00) 合并時，該形狀將繼承雙色調外觀。

//??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?方法在畫布上指定其位置。使用可選參數可將圖像縮放到指定的大小，甚至僅顯示圖像的一個片段，這對于實現滾動背景或使用子畫面表動態顯示子畫面等操作非常有用。

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

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

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

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

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

//?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: 漸變

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

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

//?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 軸坐標—，這與線性漸變中一樣—，但每個坐標對都有第三個與其關聯的 z 軸坐標，用于定義半徑。可以想像為圍繞一個坐標繪制一個圓，該坐標位于中心 (250, 250)，繪制的圓的大小以像素為單位定義。這樣定義兩個圓之后，一個圓較小，一個圓跨整個畫布，有 6 個數字傳遞到?createRadialGradient。在呈現時，徑向漸變在兩個圓之間的空間中繪制，顏色等級與圓的半徑的大小成正比。

//?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: 動畫

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

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

//?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 轉換和動畫可用于轉換畫布本身和畫布外部的對象。

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

步驟 6: 更多 HTML5 畫布提示

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

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

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

可以使用?globalCompositeOperation?屬性定義兩個畫布元素重疊時會發生什么情況。 使用此屬性始終可以定義在源或新元素級別發生的情況?？梢詧绦械牟僮饔蓄伾旌?、遮蔽和更改重疊優先級等。

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

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

當前題目：html5畫圖,HTML5繪制圖形
本文URL：http://m.newbst.com/article36/dsijosg.html

成都網站建設公司_創新互聯，為您提供App設計、動態網站、商城網站、企業網站制作、網站內鏈、外貿網站建設

廣告

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