JS之使用Canvas繪圖

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

成都創(chuàng)新互聯(lián)是一家專業(yè)提供淳安企業(yè)網站建設,專注與成都網站制作、成都網站建設、H5場景定制、小程序制作等業(yè)務。10年已為淳安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站建設公司優(yōu)惠進行中。

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

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

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

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

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

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

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

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數(shù) 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結果取決于兩個屬性： 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ū)域。本質上，這個方法可以把繪制上下文中的某一矩形區(qū)域變透明。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CanvasGradient 對象的實例。

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

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

象的坐標必須匹配才行。

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

模式其實就是重復的圖像，可以用來填充或描邊圖形。要創(chuàng)建一個新模式，可以調用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 表示后繪制的圖形怎樣與先繪制的圖形結合。

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

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

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

類型化數(shù)組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內存中指定的字節(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í)行各種操作的重要基礎。

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

已知兩個點，如何用javascript在網頁上畫一條直線？

可以呀,只要他們倆之間畫很多的小點就是一條直線啦,哈哈,用循環(huán)就可以啦,至于點的位置嘛,只要有初中的數(shù)學就可以搞定,我就不說了,顏色和粗度只要設置小點的style就可以啦,至于小點嘛可不能用英文里的句號(.),哪樣會產生編差,因為他不在正中,而在底部,可以用(●),雖然大了點,但可以變小,也可以自已成為畫一個圖,哈哈,,,,,,,,,

Three.js將多邊形線條（Line）轉換成模型(Mesh)

當一個國家由多邊形輪廓組合而成時，我們如何將它轉換成三角面模型呢？

對點擊進行三角剖分后我們發(fā)現(xiàn)多邊形輪廓外面也進行了三角剖分，顯然這不是我們想要的。

接下來我們需要使用point-in-polygon庫(判斷點是否在多邊形內)來去除輪廓外的三角面。

1、求出外面三角面的重心

2、使用point-in-polygon判斷重心是否在輪廓內。

3、重置頂點索引

將多邊形輪廓轉換成mesh后可以使用射線進行拾取操作。

js標簽繪制不同粗細的線條

請在繪制每條線條前，用beginPath()重置路徑，這樣每條線條的樣式就可以單獨設置了：

var?cv?=?document.getElementById('canvas');

var?g?=?cv.getContext('2d');

//繪制線條1

g.beginPath();?//看這行

g.lineWidth=5;

g.moveTo(x1,y1);

g.lineTo(x2,y2);

g.stroke();

//繪制線條2

g.beginPath();??//還有這行

g.lineWidth=10;

g.moveTo(x3,y3);

g.lineTo(x4,y5);

g.stroke();

javascript 中雙波浪線 是做什么處理的

js中波浪線運算符"~"的作用是將數(shù)字轉化為有符號32位整數(shù)并作位取反, 位取反即把數(shù)字轉換為2進制補碼然后把0和1反轉. 對一個數(shù)字取反2次會變成原來的數(shù)字, 于是雙波浪線的作用就是把一個小數(shù)舍棄小數(shù)點轉換為整數(shù), 在數(shù)字較小轉換為32位整數(shù)時不會溢出的情況下可以當作Math.floor的偷懶寫法. 不過更一般的寫法是"num | 0", 即位或0, 在位運算上不會改變數(shù)字但可以快速的轉換為整數(shù), 在各種將數(shù)字轉換為整數(shù)的寫法中位或0速度最快

我用javascript畫線，怎么畫線呢？？？

html xmlns:v="urn:schemas-microsoft-com:vml"

HEAD

META http-equiv="Content-Type" content="text/html;Charset=gb2312"

titlevml實例/title

STYLE

v\:*{behavior:url(#default#VML);}/*聲明V為VML變量*/

/STYLE

SCRIPT LANGUAGE="JavaScript"

var x,y,a,b;

function drawline(fromX,fromY,toX,toY){

var strElement= "v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'/v:Line";

var newPoint = document.createElement(strElement);

document.getElementById("map").appendChild(newPoint);

}

function draw(){

if(x==undefinedb==undefined){x=window.event.x;y=window.event.y;return false;}

a=window.event.x;b=window.event.y;

drawline(x,y,a,b)

x=a;y=b;

}

function draws(){

if(x==undefinedb==undefined){return false;}

if(x==window.event.xb==window.event.y){return false;}

if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""}

var strElement= "v:Line id='TempLine' from='" + x + "," + y + "' to='" + window.event.x + "," + window.event.y + "' strokecolor='red'/v:Line";

var newPoint = document.createElement(strElement);

document.getElementById("map").appendChild(newPoint);

}

/SCRIPT

/HEAD

BODY

table border="1" align="center"

tr

tddiv id="map" style="width:600px;height:500px;background-color:#cccccc;position:relative;" onmousedown="draw();" onmousemove="draws()"/div/td

/tr

/table

/body

/html

以上代碼僅支持IE瀏覽器。

名稱欄目：javascript線條,線條什么?
轉載注明：http://chinadenli.net/article45/dsgcsei.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、網站制作、網站建設、網站導航、品牌網站制作、建站公司

廣告

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