要使用元素，必須先設(shè)置width和height屬性，指定可以繪圖的區(qū)域大小。
<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()方法可以導(dǎo)出元素上繪制的圖像。接受一個參數(shù)：圖像的MIME類型格式。取得畫布中一幅PNG格式的圖像。
var imgURI = drawing.toDataURL("image/png");var image = document.createElement("img");image.src = imgURI;document.body.appendChild(image);2D上下文的坐標(biāo)始于元素的左上角，原點坐標(biāo)是(0,0)。
兩個屬性：fillStyle和strokeStyle。這兩個屬性的值可以是字符串，漸變對象或模式對象，他們的默認值都是“#000000”。如果是顏色可以使用CSS中顏色值的任何格式。
var context = drawing.getContext("2d");context.strokeStyle = "red";context.fillStyle = "#0000ff";fillRect():填充矩形，填充的顏色由fillStyle屬性指定。 strokeRect():繪制的矩形用指定的顏色描邊。顏色由strokeStyle屬性指定.描邊線條的寬度由lineWidth屬性控制，可以是任意整數(shù)。lineCap屬性可以控制線條末端的形狀是平頭，圓頭，還是方頭。(“butt”,”round”,”square”),lineJoin屬性可以控制線條相交的方式是圓交，斜交，斜接(“round”,”bevel”,”miter”) clearRect():清楚畫布上的矩形區(qū)域。
這三個方法都接受4個參數(shù)：矩形的x坐標(biāo)，矩形的y坐標(biāo)，矩形寬度和高度。單位都是像素。
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);要繪制路徑，首先調(diào)用beginPath()方法，然后再調(diào)用下列方法繪制路徑：
arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y)為圓心繪制一條弧線，半徑為radius，起始和結(jié)束角度，是否按逆時針方向計算角度。 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):將繪圖游標(biāo)移動到(x,y)，不劃線。 quadraticCruveTo(cx,cy,x,y):從上一點繪制一條二次曲線，到（x,y)為止，以(cx,cy)為控制點。 rect(x,y,width,height):從點(x,y)繪制一個矩形。
創(chuàng)建路徑后，可調(diào)用以下方法： 1. closePath():繪制一條連接到路徑起點的線條。 2. fill()：填充 3. stroke()：描邊 4. clip()：在路徑上創(chuàng)建一個剪切區(qū)域。 繪制一個時鐘
context.beginPath(); //繪制外圓 context.arc(100,100,99,0,2*Math.PI,false); //內(nèi)圓 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個參數(shù)：要繪制的文本字符串，x坐標(biāo)，y坐標(biāo)和可選的最大像素高度。而且這兩個方法都以3個屬性為基礎(chǔ)： 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):圍繞原點旋轉(zhuǎn)圖像angle弧度。 scale(scaleX,scaleY):縮放圖像，在x方向上乘以scaleX,在Y方向上乘以scaleY. translate(x,y):將坐標(biāo)原點移動到(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):將變換矩陣重置為默認狀態(tài)，然后再調(diào)用transform（）.
還有兩個方法需要注意（可以多次調(diào)用）： save():對繪圖上下文的設(shè)置進行保存。以便將來會用到。(保存在一個棧結(jié)構(gòu)中) restore()：一級級恢復(fù)上下文的設(shè)置。即context回到save()之前的狀態(tài)。
drawImage():把一幅圖像繪制到畫布上。 三種不同的調(diào)用方式： 傳入一個元素，繪制圖像起點的x,y坐標(biāo)。
還可以再傳兩個參數(shù)：目標(biāo)寬度，目標(biāo)高度。以此來縮放圖像。
context.drawImage(image,10,10,20,30);第三種調(diào)用方式傳入9個參數(shù)：要繪制的圖像，源圖像的x坐標(biāo)，源圖像的y坐標(biāo),源圖像的寬度，源圖像的高度，目標(biāo)圖像的x坐標(biāo)，目標(biāo)圖像的y坐標(biāo)，目標(biāo)圖像的寬度，目標(biāo)圖像的高度。
注:除了給drawImage（）方法傳入元素外，還可以傳入另一個元素作為其第一個參數(shù)。這樣就可以把另一個畫布內(nèi)容繪制到當(dāng)前畫布上。
2D上下文會根據(jù)以下幾個屬性自動為形狀或路徑繪制出陰影： shadowColor:用Css顏色格式表示的陰影顏色，默認為黑色。 shadowOffsetX:形狀或路徑x軸的陰影偏移量，默認為0. shadowOffsetY:形狀或路徑y(tǒng)a軸的陰影偏移量，默認為0. shadowBlur:模糊的像素數(shù)，默認為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上下文來創(chuàng)建和修改： createLinearGradient():創(chuàng)建一個新的線性漸變。4個參數(shù)：起點的x，y坐標(biāo)，終點的x,y坐標(biāo)。返回CanvasGradient實例。 創(chuàng)建完后，使用addColorStop():指定色標(biāo)。兩個參數(shù)：色標(biāo)位置（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);也可以創(chuàng)建徑向漸變：createRadialGradient():6個參數(shù)：對應(yīng)著兩個圓的圓心和半徑。前三個是起點圓的圓心和半徑，后三個是終點圓的。
gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);其實就是重復(fù)的圖像，可以用來填充或描邊圖形。 createPattern():2個參數(shù)，一個元素和一個表示如何重復(fù)圖像的字符串，（repeat,repate-x,repeat-y,no-repeat)
createPattern()的第一個參數(shù)可以是元素或另一個元素。
getImageData():取得原始圖像數(shù)據(jù)。4個參數(shù)，要取得其數(shù)據(jù)的畫面區(qū)域的x，y坐標(biāo)以及該區(qū)域的像素寬度和高度。 返回一個ImageData的實例。每個ImageData對象有三個屬性。width,height和data（一個數(shù)組，保存著圖像中每個像素的數(shù)據(jù)，每個像素用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):方法把圖像數(shù)據(jù)繪制到畫布上。
globalAlpah:介于0-1的值，用于指定所有繪制的透明度。 globalCompositionOperation:表示后繪制的圖形怎樣與先繪制的圖形結(jié)合。可能的值如下： source-over(默認值)：后繪制的圖形位于先繪制圖形的上方。 source-in:兩者重疊的部分可見，其他部分完全透明。 source-out:后繪制的圖形與先繪制的圖形不重疊的部分可見，先繪制的圖形完全透明。 source-atop:后繪制的圖形與先繪制的圖形重疊的部分可見,先繪制的圖形不受影響。 destination-over:后繪制的圖形位于先繪制圖形的下方，只有之前透明像素下的部分才可見。 destination-in:后繪制的圖形位于先繪制圖形的下方，兩者不重疊的部分完全透明。 destination-out:后繪制的圖形擦除與先繪制圖形重疊的部分。 destination-atop:后繪制的圖形位于先繪制圖形的下方,在兩者不重疊的地方，先繪制的圖形變透明。 lighter:后繪制的圖形與先繪制的圖形重疊部分的值相加，使該部分變亮。 copy:后繪制的圖形完全取代與之重疊的先繪制圖形。 xor:后繪制的圖形與先繪制的圖形重疊部分執(zhí)行“異或”操作。
針對Canvas的3D上下文
webGL涉及的復(fù)雜計算需要提前知道數(shù)值的精度，而js數(shù)值無法滿足需要。因此webGL引進了類型化數(shù)組。（其元素被設(shè)置為特性類型的值） ArrayBuffer:該對象表示的是內(nèi)存中指定的字節(jié)數(shù)。但不會指定這些字節(jié)用于保存什么類型的數(shù)據(jù)。
var buffer = new ArrayBuffer(20);var bytes = buffer.byteLength;//20后續(xù)補上
新聞熱點
疑難解答
