JS之使用Canvas繪圖

canvas 元素負責在頁面中設定一個區(qū)域，然后就可以通過 JavaScript 動態(tài)地在這個區(qū)域中繪制圖形。

主要從事網(wǎng)頁設計、PC網(wǎng)站建設（電腦版網(wǎng)站建設）、wap網(wǎng)站建設（手機版網(wǎng)站建設）、響應式網(wǎng)站建設、程序開發(fā)、微網(wǎng)站、小程序設計等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)積累了豐富的成都網(wǎng)站建設、成都做網(wǎng)站、網(wǎng)絡營銷經(jīng)驗，集策劃、開發(fā)、設計、營銷、管理等多方位專業(yè)化運作于一體，具備承接不同規(guī)模與類型的建設項目的能力。

要使用 canvas 元素，必須先設置其 width 和 height 屬性，指定可以繪圖的區(qū)域大小。出現(xiàn)在開始和結(jié)束標簽中的內(nèi)容是后備信息，如果瀏覽器不支持 canvas 元素，就會顯示這些信息。

如果不添加任何樣式或者不繪制任何圖形，在頁面中是看不到該元素的。

要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調(diào)用getContext() 方法并傳入上下文的名字。傳入 "2d" ，就可以取得 2D 上下文對象。

使用 toDataURL() 方法，可以導出在 canvas 元素上繪制的圖像。這個方法接受一個參數(shù)，即圖像的 MIME 類型格式，而且適合用于創(chuàng)建圖像的任何上下文。

取得畫布中的一幅 PNG 格式的圖像：

如果繪制到畫布上的圖像源自不同的域， toDataURL() 方法會拋出錯誤。

使用 2D 繪圖上下文提供的方法，可以繪制簡單的 2D 圖形，比如矩形、弧線和路徑。2D 上下文的坐標開始于 canvas 元素的左上角，原點坐標是(0,0)。

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數(shù) 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結(jié)果取決于兩個屬性： fillStyle 和 strokeStyle 。

這兩個屬性的值可以是字符串、漸變對象或模式對象，而且它們的默認值都是 "#000000" 。如果為它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進制碼、rgb 、 rgba 、 hsl 或 hsla 。

與矩形有關的方法包括 fillRect() 、strokeRect() 和 clearRect() 。這三個方法都能接收 4 個參數(shù)：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數(shù)的單位都是像素。

fillRect() 方法在畫布上繪制的矩形會填充指定的顏色。填充的顏色通過 fillStyle 屬性指定：

strokeRect() 方法在畫布上繪制的矩形會使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定。

描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數(shù)。另外，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（ "butt" 、"round" 或 "square" ），通過 lineJoin 屬性可以控制線條相交的方式是圓交、斜交還是斜接（ "round" 、 "bevel" 或 "miter" ）。

clearRect() 方法用于清除畫布上的矩形區(qū)域。本質(zhì)上，這個方法可以把繪制上下文中的某一矩形區(qū)域變透明。

通過路徑可以創(chuàng)造出復雜的形狀和線條。要繪制路徑，首先必須調(diào)用 beginPath() 方法，表示要開始繪制新路徑。然后，再通過調(diào)用下列方法來實際地繪制路徑。

如果想繪制一條連接到路徑起點的線條，可以調(diào)用closePath() 。如果路徑已經(jīng)完成，你想用 fillStyle 填充它，可以調(diào)用 fill() 方法。另外，還可以調(diào)用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle 。最后還可以調(diào)用 clip() ，這個方法可以在路徑上創(chuàng)建一個剪切區(qū)域。

繪制一個不帶數(shù)字的時鐘表盤：

isPointInPath() 方法接收 x 和 y 坐標作為參數(shù)，用于在路徑被關閉之前確定畫布上的某一點是否位于路徑上。

繪制文本主要有兩個方法： fillText() 和 strokeText() 。這兩個方法都可以接收 4 個參數(shù)：要繪制的文本字符串、x 坐標、y 坐標和可選的最大像素寬度。

兩個方法都以下列 3 個屬性為基礎：

fillText() 方法使用fillStyle 屬性繪制文本， strokeText() 方法使用 strokeStyle 屬性為文本描邊。

通過上下文的變換，可以把處理后的圖像繪制到畫布上。2D 繪制上下文支持各種基本的繪制變換。創(chuàng)建繪制上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣下，所有處理都按描述直接繪制。為繪制上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產(chǎn)生不同的結(jié)果。

把原點變換到表盤的中心：

使用 rotate() 方法旋轉(zhuǎn)時鐘的表針：

可以調(diào)用 save() 方法，調(diào)用這個方法后，當時的所有設置都會進入一個棧結(jié)構(gòu)，得以妥善保管。調(diào)用 restore() 方法，在保存設置的棧結(jié)構(gòu)中向前返回一級，恢復之前的狀態(tài)。

save() 方法保存的只是對繪圖上下文的設置和變換，不會保存繪圖上下文的內(nèi)容。

可以使用 drawImage()方法把一幅圖像繪制到畫布上。

以使用三種不同的參數(shù)組合。最簡單的調(diào)用方式是傳入一個 HTML img 元素，以及繪制該圖像的起點的 x 和 y 坐標。

如果想改變繪制后圖像的大小，可以再多傳入兩個參數(shù)，分別表示目標

寬度和目標高度。通過這種方式來縮放圖像并不影響上下文的變換矩陣。

繪制出來的圖像大小會變成 20×30 像素。

可以選擇把圖像中的某個區(qū)域繪制到上下文中。 drawImage() 方法的這種調(diào)用方式總共需要傳入 9 個參數(shù)：要繪制的圖像、源圖像的 x 坐標、源圖像的 y 坐標、源圖像的寬度、源圖像的高度、目標圖像的 x 坐標、目標圖像的 y 坐標、目標圖像的寬度、目標圖像的高度。這樣調(diào)用drawImage() 方法可以獲得最多的控制。

2D 上下文會根據(jù)以下幾個屬性的值，自動為形狀或路徑繪制出陰影。

要創(chuàng)建一個新的線性漸變，可以調(diào)用 createLinearGradient() 方法。這個方法接收 4 個參數(shù)：起點的 x 坐標、起點的 y 坐標、終點的 x 坐標、終點的 y 坐標。調(diào)用這個方法后，它就會創(chuàng)建一個指定大小的漸變，并返回

CanvasGradient 對象的實例。

創(chuàng)建了漸變對象后，下一步就是使用 addColorStop() 方法來指定色標。這個方法接收兩個參數(shù)：色標位置和 CSS 顏色值。色標位置是一個 0（開始的顏色）到 1（結(jié)束的顏色）之間的數(shù)字。

為了讓漸變覆蓋整個矩形，而不是僅應用到矩形的一部分，矩形和漸變對

象的坐標必須匹配才行。

要創(chuàng)建徑向漸變（或放射漸變），可以使用 createRadialGradient() 方法。這個方法接收 6 個參數(shù)，對應著兩個圓的圓心和半徑。前三個參數(shù)指定的是起點圓的原心（x 和 y）及半徑，后三個參數(shù)指定的是終點圓的原心（x 和 y）及半徑。

模式其實就是重復的圖像，可以用來填充或描邊圖形。要創(chuàng)建一個新模式，可以調(diào)用createPattern() 方法并傳入兩個參數(shù)：一個 HTML img 元素和一個表示如何重復圖像的字符串。其中，第二個參數(shù)的值與 CSS 的 background-repeat 屬性值相同，包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。

createPattern() 方法的第一個參數(shù)也可以是一個 video 元素，或者另一個 canvas 元素。

2D 上下文的一個明顯的長處就是，可以通過 getImageData() 取得原始圖像數(shù)據(jù)。這個方法接收4 個參數(shù)：要取得其數(shù)據(jù)的畫面區(qū)域的 x 和 y 坐標以及該區(qū)域的像素寬度和高度。

取得左上角坐標為(10,5)、大小為 50×50 像素的區(qū)域的圖像數(shù)據(jù)：

返回的對象是 ImageData 的實例。每個 ImageData 對象都有三個屬性： width 、 height 和data 。其中 data 屬性是一個數(shù)組，保存著圖像中每一個像素的數(shù)據(jù)。

在 data 數(shù)組中，每一個像素用4 個元素來保存，分別表示紅、綠、藍和透明度值。

數(shù)組中每個元素的值都介于 0 到 255 之間（包括 0 和 255）。

還有兩個會應用到 2D 上下文中所有繪制操作的屬性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一個介于 0 和 1 之間的值（包括 0和 1），用于指定所有繪制的透明度。默認值為 0。如果所有后續(xù)操作都要基于相同的透明度，就可以先把 globalAlpha 設置為適當

值，然后繪制，最后再把它設置回默認值 0。

第二個屬性 globalCompositionOperation 表示后繪制的圖形怎樣與先繪制的圖形結(jié)合。

WebGL 是針對 Canvas 的 3D 上下文。

WebGL是從 OpenGL ES 2.0 移植到瀏覽器中的，而 OpenGL ES 2.0 是游戲開發(fā)人員在創(chuàng)建計算機圖形圖像時經(jīng)常使用的一種語言。WebGL 支持比 2D 上下文更豐富和更強大的圖形圖像處理能力。

WebGL 涉及的復雜計算需要提前知道數(shù)值的精度，而標準的 JavaScript 數(shù)值無法滿足需要。為此，WebGL 引入了一個概念，叫類型化數(shù)組（typed arrays）。類型化數(shù)組也是數(shù)組，只不過其元素被設置為特定類型的值。

類型化數(shù)組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內(nèi)存中指定的字節(jié)數(shù)，但不會指定這些字節(jié)用于保存什么類型的數(shù)據(jù)。通過 ArrayBuffer 所能做的，就是為了將來使用而分配一定數(shù)量的字節(jié)。

創(chuàng)建了 ArrayBuffer 對象后，能夠通過該對象獲得的信息只有它包含的字節(jié)數(shù)，方法是訪問其byteLength 屬性：

使用 ArrayBuffer （數(shù)組緩沖器類型）的一種特別的方式就是用它來創(chuàng)建數(shù)組緩沖器視圖。其中，最常見的視圖是 DataView ，通過它可以選擇 ArrayBuffer 中一小段字節(jié)。為此，可以在創(chuàng)建 DataView實例的時候傳入一個 ArrayBuffer 、一個可選的字節(jié)偏移量（從該字節(jié)開始選擇）和一個可選的要選擇的字節(jié)數(shù)。

實例化之后， DataView 對象會把字節(jié)偏移量以及字節(jié)長度信息分別保存在 byteOffset 和byteLength 屬性中。

類型化視圖一般也被稱為類型化數(shù)組，因為它們除了元素必須是某種特定的數(shù)據(jù)類型外，與常規(guī)的數(shù)組無異。

類型化數(shù)組是 WebGL 項目中執(zhí)行各種操作的重要基礎。

目前，主流瀏覽器的較新版本大都已經(jīng)支持 canvas 標簽。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對于 WebGL 而言，目前還只有 Firefox 4+和 Chrome 支持它。

怎樣用javascript繪制表格

function mh_drawtable()

{

mh_tb = "table width=100% cellpadding=0 cellspacing=0 border=1";

for(j=0;j4;j++){

mh_tb += "tr";

for(i=0;i4;i++)

{

mh_tb += "td height=20"+(i+1)+"/td";

}

mh_tb += "/tr";

}

mh_tb += "/table";

document.all.showtime.innerHTML = mh_tb;

}

JS中canvas畫布繪制中如何實現(xiàn)縮放，位移，旋轉(zhuǎn)

cxt.scale(2,2);

縮放的是整個畫布，縮放后，繼續(xù)繪制的圖形會被放大或縮小。

ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置

x： 添加到水平坐標（x）上的值

y： 添加到垂直坐標（y）上的值

發(fā)生位移后，相當于把畫布的0,0坐標 更換到新的x,y的位置，所有繪制的新元素都被影響。

位移畫布一般配合縮放和旋轉(zhuǎn)等。

context.rotate(angle); 方法旋轉(zhuǎn)當前的繪圖

注意參數(shù)是弧度（PI）

如需將角度轉(zhuǎn)換為弧度，請使用 degrees*Math.PI/180 公式進行計算。

javascript如何畫圖形？

這個問題你用baidu搜索一下，有很多的教程。。

;cl=3

1.

JAVASCRIPT經(jīng)常通過用戶提供的數(shù)據(jù)動態(tài)地生成條形圖。總的來說這是由于條形圖的簡潔，它只是簡單地由不確定長度的圖形組成。我們使用JAVASCRIPT動態(tài)地畫出每個圖形，每個圖形的長度和用戶輸入的數(shù)據(jù)有關。

我們需要的是以一個1x15的圖形作為開始：

如果我想要拉長這幅圖象到 50x15 ，我使用 JavaScript 這樣做：

script

document.write(img src="poll.gif" width="50" height="15"')

/script

這就形成了動態(tài)圖形的基礎。這是一個我用JAVASCRIPT寫的一個簡單的腳本，它用來說明了圖形創(chuàng)建的例子。

script

var graphtext=new Array("Jill", "Bob", "Tony") //圖形項目

var graphvalue=new Array("60", "45", "95") //圖形值 (使用的是百分比，例如70=70%)

var barlength=200

for (i=0;igraphtext.length;i++)

document.write (graphtext[i]+': img src="poll.gif" width="'+graphvalue[i]/100*barlength+'" height="15"br')

/script

Jill:

Bob:

Tony

代碼的關鍵之處在于：width="'+graphvalue[i]/100*barlength+'"

這句話產(chǎn)生圖形的寬度，這基于用戶提供的數(shù)據(jù)。每個長度是輸入值的百分比，然后乘以條形長度的基本長度。

2.

使用圖形信息建立原始數(shù)據(jù)的圖形。只給復雜圖形的名稱賦予一定的值（值可以是絕對值或百分比），剩下的留給腳本就行了。

圖形信息允許你在同一個網(wǎng)頁上生成不止一個圖形文件，而這只需要多次的調(diào)用關鍵的函數(shù)。

Example:

Example 1 (using absolute values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

Total participants: 211

Example 2 (using percentage values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

因為EXAMPLE 1是用絕對值來創(chuàng)建的，腳本也在最后顯示了總值。

指導

步驟一：下面是圖形信息的兩個版本。第一個要求圖形值是絕對值，而第二個是相對值。

絕對方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Absolute)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimage="poll.gif"

//DEFINE GRAPH VALUES [Item name, absolute value]

var graphx=new Array()

graphx[0]=["CNN",60]

graphx[1]=["MSNBC",75]

graphx[2]=["ABC News",24]

graphx[3]=["BBC News",52]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphy=new Array()

function graphit(g,gwidth){

total=0

for (i=0;ig.length;i++)

total+=parseInt(g[i][1])

output='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calpercentage=Math.round(g[i][1]*100/total)

calwidth=Math.round(gwidth*(calpercentage/100))

output+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimage+'" width="'+calwidth+'" height="10" '+calpercentage+'%/td/tr'

}

output+='/table'

document.write(output+'brTotal participants: b'+total+'/b')

}

//CALL GRAPHIT FUNCTION

//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphit(graphx,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

相對方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Percentage)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]

var graphv=new Array()

graphv[0]=["CNN","28%"]

graphv[1]=["MSNBC","36%"]

graphv[2]=["ABC News","11%"]

graphv[3]=["BBC News","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphz=new Array()

function graphitP(g,gwidth){

outputP='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calwidthP=gwidth*(parseInt(g[i][1])/100)

outputP+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimageP+'" width="'+calwidthP+'" height="10" '+g[i][1]+'/td/tr'

}

outputP+='/table'

document.write(outputP)

}

//CALL GRAPHIT FUNCTION

//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphitP(graphv,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

以上回答你滿意么？

如何用javascript繪制動態(tài)表格

要上班了,簡單寫了一段腳本,提供一個思路 主要是通過 javascript + DOM實現(xiàn)的, script function DeleteTr(i) { var table = document.getElementById("table1"); var tr = table.childNodes[0]; tr.removeChild(tr.childNodes[i]); } function AppendTr() { var table = document.getElementById("table1"); var tr = table.childNodes[0]; var trnew = document.createElement("tr"); var td = document.createElement("td"); var text = document.createTextNode("表格內(nèi)容"); td.appendChild(text); trnew.appendChild(td); tr.appendChild(trnew); } /script table id="table1" border="1" trtd1/td/tr trtd2/td/tr trtd3/td/tr trtd4/td/tr /table input type="button" onclick="DeleteTr(2);" value="delete row 3" input type="button" onclick="AppendTr();" value="Insert row"

網(wǎng)站標題：javascript繪制,javascript繪制圖形代碼
標題鏈接：http://m.newbst.com/article12/dssiodc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、小程序開發(fā)、企業(yè)建站、動態(tài)網(wǎng)站、Google

廣告

聲明：本網(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)