親愛的提問朋友,html5中常用的兩種繪圖元素是:Canvas和SVG。
創(chuàng)新互聯(lián)2013年至今,先為五臺等服務建站,五臺等地企業(yè),進行企業(yè)商務咨詢服務。為五臺企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
他們都是html5中支持在畫布上繪制圖形和放入圖片的。
Canvas 是H5新出來的標簽canvas/canvas
Canvas畫布,利用JavaScript在網(wǎng)頁繪制圖像
在標簽中給上寬高:canvas width="800" height="800"/canvas?
SVG 可縮放矢量圖形(Scalable Vector Graphics),基于可擴展標記語言XML? 出來的時間比較老
SVG 用來定義用于網(wǎng)格的基于矢量的圖形。
工具/材料
Sublime Text
01
首先要準備一個畫布,如下圖所示,在HTML5中我們用canvas來表示畫布
02
然后我們在script腳本中獲取畫布對象,如下圖所示,運用JS的getElementById方法即可
03
接下來我們通過畫布對象的getContext方法來獲取上下文2d對象,如下圖所示,我們要操作的內容都在里面
04
然后我們給2d上下文填充背景色,如下圖所示,運用上下文的fillStyle屬性即可
05
接下來,運用上下文的fillRect方法來畫一個矩形,注意里面的四個值就是四個坐標,如下圖所示
06
最后我們運行界面程序,你會看到如下圖所示的紅色矩形樣例,你可要和上面的坐標對應一下
07
當然2d上下文中還可以畫其他的圖形,如下圖所示的圓形,大家根據(jù)自己的需要應用即可
步驟 1: 在 HTML 中設置畫布,創(chuàng)建一個引用,并獲取上下文對象
畫布在 HTML 中通過 canvas 標簽定義。與其他標簽類似,canvas 的屬性(如寬度和高度)作為特性輸入。假設你希望創(chuàng)建一個寬 500 像素、高 500 像素的畫布,并將其命名為“can1”,稍后在 JavaScript 中引用它時將用到。
在 HTML 文檔中輸入 canvas 標簽。
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?方法可設置線條開始位置的坐標。然后只需使用另一方法設置終點。 第二步可以使用若干方法,每種方法專用于幫助呈現(xiàn)一種不同的線型,無論是直線、貝塞爾曲線還是圓弧。若要將線條合并為形狀,可以閉合對?beginPath?和?closePath?方法調用中的線條。在指定所需的外觀之后,可以使用?fill?方法應用顏色,并使用?stroke?方法執(zhí)行線條和形狀的呈現(xiàn)。
應用一些基本風格。這里,通過使用?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();
在后續(xù)步驟中,將在這個 500×500 的黑色畫布上繼續(xù)構建。
現(xiàn)在,準備在畫布的黑色表面繪制一個白色線條。先從直線開始。
使用?moveTo?方法設置直線的起點,使用?lineTo?方法設置終點。
這些方法采用兩個數(shù)字作為參數(shù)。第一個數(shù)字表示 x 軸坐標,或者表示此坐標定義的自畫布左側算起的像素數(shù)。第二個數(shù)字是從頂部開始測量的 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();
若要創(chuàng)建一個圓,請使用?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?接收一種顏色。前面設置的筆劃樣式將創(chuàng)建白色線條,在與應用于主體的紅色 (#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?方法在畫布上指定其位置。使用可選參數(shù)可將圖像縮放到指定的大小,甚至僅顯示圖像的一個片段,這對于實現(xiàn)滾動背景或使用子畫面表動態(tài)顯示子畫面等操作非常有用。
若要在屏幕上繪制位圖圖像而不進行任何修改,請指定要用于左上角的 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)
若要縮放圖像,可在末尾添加兩個數(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?的調用提高到 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: 漸變
任何人只要熟悉在圖形設計程序中定義漸變的常見方式,都會喜歡使用 JavaScript 代碼定義漸變的簡單性。在設計程序中是選擇顏色,漸變中的顏色位置使用水平滑塊設置。JavaScript 中的唯一區(qū)別是使用從 0 到 1 范圍內的小數(shù)值代替滑塊。
在設計程序中,線性漸變使用線條在圖像上定位,線條的開始和結束位置確定方向和縮放級別。在 JavaScript 中,該線條使用兩對 x、y 軸坐標繪制。然后將 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 軸坐標—,這與線性漸變中一樣—,但每個坐標對都有第三個與其關聯(lián)的 z 軸坐標,用于定義半徑??梢韵胂駷閲@一個坐標繪制一個圓,該坐標位于中心 (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: 動畫
可以使用多種方法繪制動畫。
對于畫布內的元素,JavaScript 提供了?setInterval?方法,該方法計劃一個重復調用的函數(shù),每經(jīng)過定義的時間間隔便調用一次該函數(shù)。在該函數(shù)中,需要重繪畫布來反映對其上呈現(xiàn)的對象的更改。下面是一個示例,其中一個函數(shù)初始化該動畫,將呈現(xiàn)頻率計劃為大約每秒 60 幀(每 13.33 毫秒一幀),并且重復調用該函數(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 轉換和動畫可用于轉換畫布本身和畫布外部的對象。
此外,新的 WinJS 庫有許多高度優(yōu)化的動畫,創(chuàng)建這些動畫是為了模擬原有 Windows 動畫的行為。 WinJS 動畫有助于為你的應用 UI 提供一個高度集成的外觀。有關詳細信息,請參閱WinJS.UI.Animation 命名空間。
步驟 6: 更多 HTML5 畫布提示
可以使用一系列屬性(shadowColor、shadowBlur、shadowOffsetX?和?shadowOffsetY)應用陰影。
可以使用?createPattern?方法作為一種模式重復畫布中的元素。
可以使用?save?方法保存畫布狀態(tài),然后執(zhí)行更改,再使用?restore?方法還原以前的狀態(tài)。該方法很好用,函數(shù)甚至不需要采用參數(shù)。
可以使用?globalCompositeOperation?屬性定義兩個畫布元素重疊時會發(fā)生什么情況。 使用此屬性始終可以定義在源或新元素級別發(fā)生的情況??梢詧?zhí)行的操作有顏色混合、遮蔽和更改重疊優(yōu)先級等。
注意??globalCompositeOperation?主題使用源表示新元素,使用目標表示以前存在的元素。
可以使用?strokeText?方法將文本添加到畫布。
當前題目:html5畫圖,HTML5繪制圖形
本文URL:http://redsoil1982.com.cn/article36/dsijosg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供App設計、動態(tài)網(wǎng)站、商城網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站內鏈、外貿網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)