1.<canvas id="mycanvas" width="800" height="600"></canvas> 2.獲取canvas物件；var canvas=document.getElementById('mycanvas'); 3.渲染上下文；var ctx=canvas.getContext('2d'); 4.顏色、樣式和陰影     fillStyle:設定填充繪畫的顏色、漸變或模式（區域填充）     strokeStyle:設定筆觸的顏色、漸變或模式（描邊）     shadowColor：設定陰影的顏色     shadowBlur:陰影的模糊級別；     shadowOffsetX、shadowOffsetY：返回陰影距形狀的水平、垂直距離

5.繪製矩形：     fillRect(x,y,w,h);//繪製一個填充的矩形，使用之前要先使用fillStyle才能起到效果     strokeRect(x, y, width, height);//繪製一個矩形的邊框,使用之前要先使用strokeStyle才能起到效果     clearRect(x, y, width, height);//清除指定矩形區域，讓清除部分完全透明。          例： ctx.fillStyle = "red";         ctx.fillRect(20 , 20 , 40 , 40);         ctx.strokeStyle = "blue";         ctx.strokeRect(40 , 40 , 60 , 60);         ctx.clearRect(30 , 30 , 50 ,50);

6. 繪製路徑：     首先，你需要建立路徑起始點。 beginPath();     然後你使用畫圖命令去畫出路徑。     之後你把路徑封閉。closePath();     一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。stroke()或fill()，stroke用於描邊，必須在使用之前用closePath()才能關閉路徑；fill用於填充,     moveTo(x,y);設定路徑的起始位置，每次設定新路徑的時候必須使用moveTo,在beginPath()後使用

    例： ctx.strokeStyle="red"         ctx.fillStyle="yellow";         ctx.beginPath();         ctx.moveTo(120,120);//起點         ctx.lineTo(120,50);         ctx.lineTo(150,50);         ctx.fill();         ctx.closePath()         ctx.stroke();

7.繪製直線lineTo(x, y);初始配合moveTo()使用

8.圓弧 arc(x, y, radius, startAngle, endAngle, anticlockwise);//radius半徑  startAngle開始, endAngle結束， anticlockwise方向：true->你是針，false->順時針

    例： ctx.moveTo(260,120);         ctx.arc(220,120,40,0,Math.PI*2,false);         ctx.moveTo(205,105);         ctx.arc(200,105,5,0,Math.PI*2,false);         ctx.moveTo(245,105);         ctx.arc(240,105,5,0,Math.PI*2,false);         ctx.moveTo(220,117);         ctx.arc(220,125,3, Math.PI*3/2 , Math.PI*1/2 ,true);         ctx.moveTo(220+Math.sin(Math.PI/4)*20,125+Math.sin(Math.PI/4)*20);         ctx.arc(220,125,20, Math.PI/4 , Math.PI*3/4 ,false);         ctx.stroke();

    arcTo(x1, y1, x2, y2, radius) //繪製圓弧,根據初始點和兩個控制點進行繪製          例： ctx.strokeStyle='brown';         ctx.moveTo(100,250);         ctx.arcTo(250, 250, 270, 350, 100);         ctx.stroke();

9.貝塞爾曲線          二次貝塞爾曲線quadraticCurveTo(cp1x, cp1y, x, y)；cp1x,cp1y為一個控制點，x,y為結束點。初始點是moveTo(x,y)設定；     例： ctx.moveTo(300,50);         ctx.quadraticCurveTo(300, 100, 350, 100);         ctx.quadraticCurveTo(400, 100, 400, 50);         ctx.quadraticCurveTo(400, 0, 350, 0);         ctx.quadraticCurveTo(300, 0, 300, 50);         ctx.stroke();          三次貝塞爾曲線bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)；          例：ctx.moveTo(450,150);         ctx.bezierCurveTo(500, 300, 600, 0, 650, 150)         ctx.stroke();          10.線型

    lineWidth=value          設定線條寬度。value是數值代表多少個畫素          lineCap=type             設定線條末端樣式。type : butt，round 和 square;預設是 butt。          lineJoin = type          設定線條與線條間接合處的樣式。type : round, bevel 和 miter。預設是 miter。          miterLimit=value         限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。          getLineDash()            返回一個包含當前虛線樣式，長度為非負偶數的陣列。          setLineDash(segments)    設定當前虛線樣式。          lineDashOffset = value   設定虛線樣式的起始偏移量。          例： ctx.beginPath();         ctx.lineCap="butt";         ctx.lineWidth=10;         ctx.moveTo(85,50);         ctx.lineTo(85,260);         ctx.stroke();      11.漸變

    createLinearGradient(x1, y1, x2, y2)  表示漸變的起點 (x1,y1) 與終點 (x2,y2)。          createRadialGradient(x1, y1, r1, x2, y2, r2)  前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，後三個引數則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。          gradient.addColorStop(position, color)   addColorStop 方法接受 2 個引數，position 引數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。color 引數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。          例：  var lingrad = ctx.createLinearGradient(0,0,0,150);         lingrad.addColorStop(0, '#00ABEB');         lingrad.addColorStop(0.5, '#fff');                  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);         radgrad4.addColorStop(0, '#F4F201');         radgrad4.addColorStop(0.8, 'red');         radgrad4.addColorStop(1, 'rgba(228,199,0,0)');         ctx.fillStyle = radgrad4;          ctx.fillRect(0,0,150,150);

12.圖案樣式

    createPattern(image, type)   Image 可以是一個 Image 物件的引用，或者另一個 canvas 物件。Type 必須是下面的字串值之一：repeat，repeat-x，repeat-y 和 no-repeat。                                         與 drawImage 有點不同，你需要確認 image 物件已經裝載完畢，否則圖案可能效果不對的。          例： var img = new Image();          img.src = "image/baozha.png"          img.onload=function(){              console.log(100)              var ptrn = ctx.createPattern(img,'repeat')             ctx.fillStyle = ptrn;                  ctx.fillRect(200,200,450,450);         }          13.陰影

    shadowOffsetX = float 、 shadowOffsetY = float           shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們預設都為 0。          shadowBlur = float  設定陰影的模糊程度          shadowColor = color 設定陰影顏色          例: ctx.shadowOffsetX =0;         ctx.shadowColor="#ccc";         ctx.shadowBlur = 10;         ctx.fillStyle = "burlywood";         ctx.fillRect(50,50, 100,100);          14.Canvas填充規則 fill()

15.繪製文字

    fillText(text, x, y textMaxWidth) 填充文字          strokeText(text, x, y textMaxWidth) 繪製文字          //text:文字內容    x,y:起始座標  textMaxWidth:文字區域的最大長度(可不填)          例： ctx.font = "48px serif";          ctx.fillText("浩然正氣",300,300,150)

16.    文字樣式

    font = value         設定文字的字型大小和字型  font-size  font-family   （大小在前，字型在後）          textAlign = value    文字對齊選項. 可選的值包括：start, end, left, right or center. 預設值是 start。

    textBaseline = value  基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。預設值是 alphabetic。

    direction = value     文字方向。可能的值包括：ltr, rtl, inherit。預設值是 inherit。          measureText(text)        將返回一個 TextMetrics物件的寬度、所在畫素，這些體現文字特性的屬性。