js高級程序設計筆記10--canvas繪圖

2024-04-27 15:16:54

字體：大中小

來源：轉載

供稿：網友

要使用元素，必須先設置width和height屬性，指定可以繪圖的區域大小。

<canvas id=‘drawing" width="200" height="200">a drawing of something</canvas>

要在canvas上畫圖，要取得繪圖上下文：getContext(上下文的名字)。傳入“2d”則獲得2D上下文。

var drawing = document.getElementById("drawing");//確認瀏覽器支持canvas元素if(drawing.getContext){ var context = drwaing.getContext("2d");}

使用toDataURL()方法可以導出元素上繪制的圖像。接受一個參數：圖像的MIME類型格式。取得畫布中一幅PNG格式的圖像。

var imgURI = drawing.toDataURL("image/png");var image = document.createElement("img");image.src = imgURI;document.body.appendChild(image);

2D上下文

2D上下文的坐標始于元素的左上角，原點坐標是(0,0)。

填充和描邊

兩個屬性：fillStyle和strokeStyle。這兩個屬性的值可以是字符串，漸變對象或模式對象，他們的默認值都是“#000000”。如果是顏色可以使用CSS中顏色值的任何格式。

var context = drawing.getContext("2d");context.strokeStyle = "red";context.fillStyle = "#0000ff";

繪制矩形

fillRect():填充矩形，填充的顏色由fillStyle屬性指定。 strokeRect():繪制的矩形用指定的顏色描邊。顏色由strokeStyle屬性指定.描邊線條的寬度由lineWidth屬性控制，可以是任意整數。lineCap屬性可以控制線條末端的形狀是平頭，圓頭，還是方頭。(“butt”,”round”,”square”),lineJoin屬性可以控制線條相交的方式是圓交，斜交，斜接(“round”,”bevel”,”miter”) clearRect():清楚畫布上的矩形區域。

這三個方法都接受4個參數：矩形的x坐標，矩形的y坐標，矩形寬度和高度。單位都是像素。

var context = drawing.getContext("2d"); //繪制紅色矩形 context.fillStyle = "#ff0000"; context.fillRect(10,10,50,50); //繪制半透明的藍色矩形 context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); context.clearRect(40,40,10,10); context.strokeStyle = "#ff0000"; context.strokeRect(20,20,50,50); context.strokeStyle = "rgba(0,0,255,0.5)"; context.strokeRect(40,40,50,50);

繪制路徑

要繪制路徑，首先調用beginPath()方法，然后再調用下列方法繪制路徑：

arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y)為圓心繪制一條弧線，半徑為radius，起始和結束角度，是否按逆時針方向計算角度。 arcTo(x1,y1,x2,y2,radius):從上一點到（x2,y2)畫一條弧線，并且以給定的半徑radius穿過(x1,y1). bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點繪制一條曲線，到(x,y)為止，并且以(c1x,c1y),(c2x,c2y)為控制點。 lineTo(x,y):從上一點繪制一條直線。到(x,y)。 moveTo(x,y):將繪圖游標移動到(x,y)，不劃線。 quadraticCruveTo(cx,cy,x,y):從上一點繪制一條二次曲線，到（x,y)為止，以(cx,cy)為控制點。 rect(x,y,width,height):從點(x,y)繪制一個矩形。

創建路徑后，可調用以下方法： 1. closePath():繪制一條連接到路徑起點的線條。 2. fill()：填充 3. stroke()：描邊 4. clip()：在路徑上創建一個剪切區域。繪制一個時鐘

context.beginPath(); //繪制外圓 context.arc(100,100,99,0,2*Math.PI,false); //內圓 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //分針 context.moveTo(100,100); context.lineTo(100,15); //時針 context.moveTo(100,100); context.lineTo(35,100); context.stroke();

isPointInPath(x,y):確定（x,y)在不在路徑上。

繪制文本

fillText(): strokeText(): 這兩個方法都接受4個參數：要繪制的文本字符串，x坐標，y坐標和可選的最大像素高度。而且這兩個方法都以3個屬性為基礎： font:表示文本樣式，大小及字體。 textAlign:文本對齊方式。可取的值：start,end,left,right,center.建議使用start和end。因為這兩個能同時適合從左到右和從右到左顯示的語言。 textBaseline:文本的基線。可取的值：top,hanging,middle,alphabetic,ideographic,bottom. 這幾個屬性都有默認值。

context.font = "bold 14px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillText("12",100,20);

變換

rotate(angle):圍繞原點旋轉圖像angle弧度。 scale(scaleX,scaleY):縮放圖像，在x方向上乘以scaleX,在Y方向上乘以scaleY. translate(x,y):將坐標原點移動到(x,y). transform(m1_1,m1_2,m2_1,m2_2,dx,dy):直接修改變換矩陣，方式是乘以如下矩陣： m1_1 m1_2 dx m2_1 m2_2 dy 0 0 1 setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy):將變換矩陣重置為默認狀態，然后再調用transform（）.

還有兩個方法需要注意（可以多次調用）： save():對繪圖上下文的設置進行保存。以便將來會用到。(保存在一個棧結構中) restore()：一級級恢復上下文的設置。即context回到save()之前的狀態。

繪制圖像

drawImage():把一幅圖像繪制到畫布上。三種不同的調用方式：傳入一個元素，繪制圖像起點的x,y坐標。

var image = document.images[0];context.drawImage(image,10,10);

還可以再傳兩個參數：目標寬度，目標高度。以此來縮放圖像。

context.drawImage(image,10,10,20,30);

第三種調用方式傳入9個參數：要繪制的圖像，源圖像的x坐標，源圖像的y坐標,源圖像的寬度，源圖像的高度，目標圖像的x坐標，目標圖像的y坐標，目標圖像的寬度，目標圖像的高度。

注:除了給drawImage（）方法傳入元素外，還可以傳入另一個元素作為其第一個參數。這樣就可以把另一個畫布內容繪制到當前畫布上。

陰影

2D上下文會根據以下幾個屬性自動為形狀或路徑繪制出陰影： shadowColor:用Css顏色格式表示的陰影顏色，默認為黑色。 shadowOffsetX:形狀或路徑x軸的陰影偏移量，默認為0. shadowOffsetY:形狀或路徑ya軸的陰影偏移量，默認為0. shadowBlur:模糊的像素數，默認為0，及不模糊。

var context = drawing.getContext("2d"); context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = "rgba(0, 0, 0, 0.5)"; context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50);

漸變

漸變由CanvasGradient實例表示。通過2D上下文來創建和修改： createLinearGradient():創建一個新的線性漸變。4個參數：起點的x，y坐標，終點的x,y坐標。返回CanvasGradient實例。創建完后，使用addColorStop():指定色標。兩個參數：色標位置（0-1）和CSS顏色值。

var context = drawing.getContext("2d"),gradient = context.createLinearGradient(30, 30, 70, 70); gradient.addColorStop(0, "white");gradient.addColorStop(1, "black");context.fillStyle = gradient;context.fillRect(30, 30, 50, 50);

也可以創建徑向漸變：createRadialGradient():6個參數：對應著兩個圓的圓心和半徑。前三個是起點圓的圓心和半徑，后三個是終點圓的。

gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);

模式

其實就是重復的圖像，可以用來填充或描邊圖形。 createPattern():2個參數，一個元素和一個表示如何重復圖像的字符串，（repeat,repate-x,repeat-y,no-repeat)

var context = drawing.getContext("2d"),image = document.images[0],pattern = context.createPattern(image, "repeat");context.fillStyle = pattern;context.fillRect(10, 10, 150, 150);

createPattern()的第一個參數可以是元素或另一個元素。

使用圖像數據

getImageData():取得原始圖像數據。4個參數，要取得其數據的畫面區域的x，y坐標以及該區域的像素寬度和高度。返回一個ImageData的實例。每個ImageData對象有三個屬性。width,height和data（一個數組，保存著圖像中每個像素的數據，每個像素用4個元素保存，紅，綠，藍，透明度）

var imageData = context.getImageData(10,5,50,50);var data = imageData.data,red = data[0],green = data[1],blue = data[2],alpha = data[3];

putImageData(ImageData，x,y):方法把圖像數據繪制到畫布上。

合成

globalAlpah:介于0-1的值，用于指定所有繪制的透明度。 globalCompositionOperation:表示后繪制的圖形怎樣與先繪制的圖形結合。可能的值如下： source-over(默認值)：后繪制的圖形位于先繪制圖形的上方。 source-in:兩者重疊的部分可見，其他部分完全透明。 source-out:后繪制的圖形與先繪制的圖形不重疊的部分可見，先繪制的圖形完全透明。 source-atop:后繪制的圖形與先繪制的圖形重疊的部分可見,先繪制的圖形不受影響。 destination-over:后繪制的圖形位于先繪制圖形的下方，只有之前透明像素下的部分才可見。 destination-in:后繪制的圖形位于先繪制圖形的下方，兩者不重疊的部分完全透明。 destination-out:后繪制的圖形擦除與先繪制圖形重疊的部分。 destination-atop:后繪制的圖形位于先繪制圖形的下方,在兩者不重疊的地方，先繪制的圖形變透明。 lighter:后繪制的圖形與先繪制的圖形重疊部分的值相加，使該部分變亮。 copy:后繪制的圖形完全取代與之重疊的先繪制圖形。 xor:后繪制的圖形與先繪制的圖形重疊部分執行“異或”操作。