JS之使用Canvas繪圖

canvas 元素負(fù)責(zé)在頁(yè)面中設(shè)定一個(gè)區(qū)域，然后就可以通過(guò) JavaScript 動(dòng)態(tài)地在這個(gè)區(qū)域中繪制圖形。

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

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

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

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

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

取得畫(huà)布中的一幅 PNG 格式的圖像：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

兩個(gè)方法都以下列 3 個(gè)屬性為基礎(chǔ)：

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

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

把原點(diǎn)變換到表盤的中心：

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

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

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

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

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

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

寬度和目標(biāo)高度。通過(guò)這種方式來(lái)縮放圖像并不影響上下文的變換矩陣。

繪制出來(lái)的圖像大小會(huì)變成 20×30 像素。

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

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

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

CanvasGradient 對(duì)象的實(shí)例。

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

為了讓漸變覆蓋整個(gè)矩形，而不是僅應(yīng)用到矩形的一部分，矩形和漸變對(duì)

象的坐標(biāo)必須匹配才行。

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

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

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

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

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

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

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

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

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

值，然后繪制，最后再把它設(shè)置回默認(rèn)值 0。

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

WebGL 是針對(duì) Canvas 的 3D 上下文。

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

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

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

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

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

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

類型化視圖一般也被稱為類型化數(shù)組，因?yàn)樗鼈兂嗽乇仨毷悄撤N特定的數(shù)據(jù)類型外，與常規(guī)的數(shù)組無(wú)異。

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

目前，主流瀏覽器的較新版本大都已經(jīng)支持 canvas 標(biāo)簽。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對(duì)于 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畫(huà)布繪制中如何實(shí)現(xiàn)縮放，位移，旋轉(zhuǎn)

cxt.scale(2,2);

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

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

x： 添加到水平坐標(biāo)（x）上的值

y： 添加到垂直坐標(biāo)（y）上的值

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

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

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

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

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

javascript如何畫(huà)圖形？

這個(gè)問(wèn)題你用baidu搜索一下，有很多的教程。。

;cl=3

1.

JAVASCRIPT經(jīng)常通過(guò)用戶提供的數(shù)據(jù)動(dòng)態(tài)地生成條形圖?？偟膩?lái)說(shuō)這是由于條形圖的簡(jiǎn)潔，它只是簡(jiǎn)單地由不確定長(zhǎng)度的圖形組成。我們使用JAVASCRIPT動(dòng)態(tài)地畫(huà)出每個(gè)圖形，每個(gè)圖形的長(zhǎng)度和用戶輸入的數(shù)據(jù)有關(guān)。

我們需要的是以一個(gè)1x15的圖形作為開(kāi)始：

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

script

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

/script

這就形成了動(dòng)態(tài)圖形的基礎(chǔ)。這是一個(gè)我用JAVASCRIPT寫(xiě)的一個(gè)簡(jiǎn)單的腳本，它用來(lái)說(shuō)明了圖形創(chuàng)建的例子。

script

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

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

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

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

2.

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

圖形信息允許你在同一個(gè)網(wǎng)頁(yè)上生成不止一個(gè)圖形文件，而這只需要多次的調(diào)用關(guān)鍵的函數(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%

因?yàn)镋XAMPLE 1是用絕對(duì)值來(lái)創(chuàng)建的，腳本也在最后顯示了總值。

指導(dǎo)

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

絕對(duì)方式：

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

相對(duì)方式：

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繪制動(dòng)態(tài)表格

要上班了,簡(jiǎn)單寫(xiě)了一段腳本,提供一個(gè)思路 主要是通過(guò) javascript + DOM實(shí)現(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)站標(biāo)題：javascript繪制,javascript繪制圖形代碼
標(biāo)題鏈接：http://jinyejixie.com/article12/dssiodc.html

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

廣告

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