摘要：使用繪圖基本用法要使用元素，必須先設(shè)置其和屬性，指定可以繪圖的區(qū)域大小。，將繪圖游標(biāo)移動(dòng)到，不畫(huà)線。，表示文本對(duì)齊方式。執(zhí)行這個(gè)變換之后，坐標(biāo)會(huì)變成之前由表示的點(diǎn)。，后繪制的圖形完全替代與之重疊的先繪制圖形。也實(shí)現(xiàn)了，但默認(rèn)是禁用的。

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

A drawing of something

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

var drawing=document.getElementById("drawing");
//確定瀏覽器支持元素
if(drawing.getContext){
  var context=drawing.getContext("2d");
  //更多代碼
}

在使用元素之前，首先要檢測(cè)getContext()方法是否存在

var drawing=document.getElementById("drawing");
//確定瀏覽器支持元素
if(drawing.getContext){
  //取得圖像的數(shù)據(jù)URI
  var imgURI=drawing.toDataURL("image/png");
  //顯示圖像
  var image=document.createElement("img");
  image.src=imgURI;
  document.body.appendChild(image);
}

2D上下文的坐標(biāo)開(kāi)始于元素的左上角，原點(diǎn)坐標(biāo)是(0,0)。所有坐標(biāo)的值都基于這個(gè)原點(diǎn)計(jì)算，x值越大表示越靠右，y值越大表示越靠下。默認(rèn)情況下，width和height表示水平和垂直兩個(gè)方向上可用的像素?cái)?shù)目

操作得結(jié)果取決于兩個(gè)屬性，fillStyle和strokeStyle

這兩個(gè)屬性的值可以是字符串，漸變對(duì)象或模擬對(duì)象，而且它們的默認(rèn)值都是"#000000"

var drawing=document.getElementById("drawing");
//確定瀏覽器支持元素
if(drawing.getContext){
  var content=drawing.getContext("2d");
  context.strokeStyle="red";
  context.fillStyle="#0000ff"
}

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

fillRect()方法在畫(huà)布上繪制的矩形會(huì)填充指定的顏色

var drawing = document.getElementById("drawing");
//確定瀏覽器支持元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  // 繪制紅色矩形
  context.fillStyle = "#ff0000";
  context.fillRect(10, 10, 50, 50);
  // 繪制半透明的藍(lán)色矩形
  context.fillStyle = "rgba(0,0,255,0.5)";
  context.fillRect(30, 30, 50, 50);
}

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

var drawing=document.getElementById("drawing");
//確定瀏覽器支持元素
if(drawing.getContext){
  var context=drawing.getContext("2d");
  //繪制紅色描邊矩形
  context.strokeStyle="#ff0000";
  context.strokeRect(10,10,50,50);
  //繪制半透明的藍(lán)色描邊矩形
  context.strokeStyle="rgba(0,0,255,0.5)";
  context.strokeRect(30,30,50,50)
}

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

var drawing = document.getElementById("drawing");
//確定瀏覽器支持元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  //繪制紅色矩形
  context.fillStyle = "#ff0000";
  context.fillRect(10, 10, 50, 50);
  //繪制半透明的藍(lán)色矩形
  context.fillStyle = "rgba(0,0,255,0.5)";
  context.fillRect(30, 30, 50, 50);
  // 在兩個(gè)矩形重疊的地方清除一個(gè)小矩形
  context.clearRect(40, 40, 10, 10);
}

要繪制路徑，首先必須調(diào)用beginPath()方法，表示要開(kāi)始繪制的新路徑

arc(x, y, radius, startAngle, endAngle, counterclockwise)，以 (x,y) 為圓心繪制一條弧線，弧線半徑為 radius ，起始和結(jié)束角度（用弧度表示）分別為 startAngle 和endAngle 。最后一個(gè)參數(shù)表示 startAngle 和 endAngle 是否按逆時(shí)針?lè)较蛴?jì)算，值為 false表示按順時(shí)針?lè)较蛴?jì)算。

arcTo(x1, y1, x2, y2, radius)，從上一點(diǎn)開(kāi)始繪制一條弧線，到 (x2,y2) 為止，并且以給定的半徑 radius 穿過(guò) (x1,y1) 。

bezierCurveTo(c1x, c1y, c2x, c2y, x, y)，從上一點(diǎn)開(kāi)始繪制一條曲線，到 (x,y) 為止，并且以 (c1x,c1y) 和 (c2x,c2y) 為控制點(diǎn)。

lineTo(x, y)，從上一點(diǎn)開(kāi)始繪制一條直線，到 (x,y) 為止。

moveTo(x, y)，將繪圖游標(biāo)移動(dòng)到 (x,y) ，不畫(huà)線。

quadraticCurveTo(cx, cy, x, y)，從上一點(diǎn)開(kāi)始繪制一條二次曲線，到 (x,y) 為止，并且以 (cx,cy) 作為控制點(diǎn)。

rect(x, y, width, height)，從點(diǎn) (x,y) 開(kāi)始繪制一個(gè)矩形，寬度和高度分別由 width 和height 指定。這個(gè)方法繪制的是矩形路徑，而不是 strokeRect() 和 fillRect() 所繪制的獨(dú)立的形狀。

var drawing = document.getElementById("drawing");
//確定瀏覽器支持元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  // 開(kāi)始路徑
  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);
  // 繪制時(shí)針
  context.moveTo(100, 100);
  context.lineTo(35, 100);
  // 描邊路徑
  context.stroke();
}

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

這兩個(gè)方法以3個(gè)屬性為基礎(chǔ)

font，表示文本樣式、大小及字體，用 CSS 中指定字體的格式來(lái)指定，例如 "10px Arial" 。

textAlign，表示文本對(duì)齊方式?？赡艿闹涤?"start" 、 "end" 、 "left" 、 "right" 和 "center" 。建議使用 "start" 和 "end" ，不要使用 "left" 和 "right" ，因?yàn)榍皟烧叩囊馑几€(wěn)妥，能同時(shí)適合從左到右和從右到左顯示（閱讀）的語(yǔ)言。

textBaseline，表示文本的基線?？赡艿闹涤?"top" 、 "hanging" 、 "middle" 、 "alphabetic" 、"ideographic" 和 "bottom" 。

//正常
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
// 起點(diǎn)對(duì)齊
context.textAlign = "start";
context.fi llText("12", 100, 40);
// 終點(diǎn)對(duì)齊
context.textAlign = "end";
context.fi llText("12", 100, 60);

修改變換矩陣

rotate(angle)，圍繞原點(diǎn)旋轉(zhuǎn)圖像 angle 弧度。

scale(scaleX, scaleY)，縮放圖像，在 x 方向乘以 scaleX ，在 y 方向乘以 scaleY 。 scaleX和 scaleY 的默認(rèn)值都是 1.0。

translate(x, y)，將坐標(biāo)原點(diǎn)移動(dòng)到 (x,y) 。執(zhí)行這個(gè)變換之后，坐標(biāo)(0,0)會(huì)變成之前由 (x,y)表示的點(diǎn)。

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)，將變換矩陣重置為默認(rèn)狀態(tài)，然后再調(diào)用 transform()

var drawing = document.getElementById("drawing");
//確定瀏覽器支持元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  //開(kāi)始路徑
  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);
  //變換原點(diǎn)
  context.translate(100, 100);
  // 旋轉(zhuǎn)表針
  context.rotate(1);
  //繪制分針
  context.moveTo(0,0);
  context.lineTo(0, -85);
  //繪制時(shí)針
  context.moveTo(0, 0);
  context.lineTo(-65, 0);
  //描邊路徑
  context.stroke();
}

使用drawImage()將圖像繪制到畫(huà)布上，三種不同的參數(shù)組合

3個(gè)參數(shù)：傳入HTML元素，繪制圖像的起點(diǎn)的x和y坐標(biāo)

5個(gè)參數(shù)：3個(gè)參數(shù)+目標(biāo)寬度和目標(biāo)高度

9個(gè)參數(shù)：要繪制的圖像，源圖像的x坐標(biāo)，源圖像的y坐標(biāo)，源圖像的寬度，源圖像的高度，目標(biāo)圖像的x坐標(biāo)，目標(biāo)圖像的y坐標(biāo)，目標(biāo)圖像的寬度，目標(biāo)圖像的高度

2D上下文根據(jù)屬性值自動(dòng)繪制陰影

shadowColor，用 CSS 顏色格式表示的陰影顏色，默認(rèn)為黑色。

shadowOffsetX，形狀或路徑 x 軸方向的陰影偏移量，默認(rèn)為 0。

shadowOffsetY，形狀或路徑 y 軸方向的陰影偏移量，默認(rèn)為 0。

shadowBlur，模糊的像素?cái)?shù)，默認(rèn) 0，即不模糊。

var context = drawing.getContext("2d");
// 設(shè)置陰影
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);
//繪制藍(lán)色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

要?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)

//繪制紅色矩形
context.fillStyle="#ff0000";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);

var image=document.images[0],
  pattern=context.createPattern(image,"repeat");
//繪制矩形
context.fillStyle=pattern;
context.fillRect(10,10,150,150);

getImageData()取得原始圖像數(shù)據(jù)，這個(gè)方法接收4個(gè)參數(shù)：要取得其數(shù)據(jù)的畫(huà)面區(qū)域的x和y坐標(biāo)以及該區(qū)域的像素寬度和高度

var drawing = document.getElementById("drawing");
//確定瀏覽器支持元素
if (drawing.getContext){
  var context = drawing.getContext("2d"),
      image = document.images[0],
      imageData, data,
      i, len, average,
      red, green, blue, alpha;
  //繪制原始圖像
  context.drawImage(image, 0, 0);
  //取得圖像數(shù)據(jù)
  imageData = context.getImageData(0, 0, image.width, image.height);
  data = imageData.data;
  for (i=0, len=data.length; i < len; i+=4){
    red = data[i];
    green = data[i+1];
    blue = data[i+2];
    alpha = data[i+3];
    //求得 rgb 平均值
    average = Math.floor((red + green + blue) / 3);
    //設(shè)置顏色值，透明度不變
    data[i] = average;
    data[i+1] = average;
    data[i+2] = average;
  }
  //回寫(xiě)圖像數(shù)據(jù)并顯示結(jié)果
  imageData.data = data;
  context.putImageData(imageData, 0, 0);
}

應(yīng)用到2D上下文所有繪制操作得屬性。globalAlpha和globalCompositionOperation

globalAlpha是一個(gè)介于0和1之間的值，用于指定所有繪制的透明度，默認(rèn)值為0，如果所有后續(xù)操作都要基于相同的透明度，就可以先把globalAlpha設(shè)置為適當(dāng)值，然后繪制，最后再把它設(shè)置回默認(rèn)值0

//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//修改全局透明度
context.globalAlpha = 0.5;
//繪制藍(lán)色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
//重置全局透明度
context.globalAlpha = 0

globalCompositionOperation表示繪制的圖形怎樣與先繪制的圖形結(jié)合，這個(gè)屬性的值是字符串

source-over默認(rèn)值，后繪制的圖形位于先繪制的圖形上方。

source-in，后繪制的圖形與先繪制的圖形重疊的部分可見(jiàn)，兩者其他部分完全透明。

source-out，后繪制的圖形與先繪制的圖形不重疊的部分可見(jiàn)，先繪制的圖形完全透明。

source-atop，后繪制的圖形與先繪制的圖形重疊的部分可見(jiàn)，先繪制圖形不受影響。

destination-over，后繪制的圖形位于先繪制的圖形下方，只有之前透明像素下的部分才可見(jiàn)。

destination-in，后繪制的圖形位于先繪制的圖形下方，兩者不重疊的部分完全透明。

destination-out，后繪制的圖形擦除與先繪制的圖形重疊的部分。

destination-atop，后繪制的圖形位于先繪制的圖形下方，在兩者不重疊的地方，先繪制的圖形會(huì)變透明。

lighter，后繪制的圖形與先繪制的圖形重疊部分的值相加，使該部分變亮。

copy，后繪制的圖形完全替代與之重疊的先繪制圖形。

xor，后繪制的圖形與先繪制的圖形重疊的部分執(zhí)行“異或”操作。

類型化數(shù)組也是數(shù)組，只不過(guò)其元素被設(shè)置為特定類型的值

類型化數(shù)組的核心就是一個(gè)名為ArrayBuffer的類型。

Firefox 4+和 Chrome 都實(shí)現(xiàn)了 WebGL API。Safari 5.1 也實(shí)現(xiàn)了 WebGL，但默認(rèn)是禁用的。