<canvas></canvas>是html5出現的新標籤，像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖 ，最近在研讀《html5與css3權威指南》下面對其中最好玩的canvas的學習做下讀書筆記與實驗。
一，繪圖工具： getcontext-----getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
定義和用法
getContext() 方法返回一個用於在畫布上繪圖的環境。
context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是 var ctx(或context)=canvas.getContext("2d");//html5僅支持2d不支持3d
參數
參數 contextID 指定了您想要在畫布上繪製的類型。當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。
返回值
一個 CanvasRenderingContext2D 對象，使用它可以繪製到 Canvas 元素中。
描述
返回一個表示用來繪製的環境類型的環境。其本意是要爲不同的繪製類型（2 維、3 維）提供不同的環境。當前，唯一支持的是 "2d"，它返回一個 CanvasRenderingContext2D 對象，該對象實現了一個畫布所使用的大多數方法。
二，利用 ctx對象進行圖像的繪製：
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設置或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回用於陰影的模糊級別 |
| shadowOffsetX | 設置或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設置或返回陰影距形狀的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創建線性漸變（用在畫布內容上） |
| createPattern() | 在指定的方向上重複指定的元素 |
| createRadialGradient() | 創建放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() | 規定漸變對象中的顏色和停止位置 |
線條樣式
| 屬性 | 描述 |
|---|---|
| lineCap | 設置或返回線條的結束端點樣式 |
| lineJoin | 設置或返回兩條線相交時，所創建的拐角類型 |
| lineWidth | 設置或返回當前的線條寬度 |
| miterLimit | 設置或返回最大斜接長度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 創建矩形 |
| fillRect() | 繪製“被填充”的矩形 |
| strokeRect() | 繪製矩形（無填充） |
| clearRect() | 在給定的矩形內清除指定的像素 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪製已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| moveTo() | 把路徑移動到畫布中的指定點，不創建線條 |
| closePath() | 創建從當前點回到起始點的路徑 |
| lineTo() | 添加一個新點，然後在畫布中創建從該點到最後指定點的線條 |
| clip() | 從原始畫布剪切任意形狀和尺寸的區域 |
| quadraticCurveTo() | 創建二次貝塞爾曲線 |
| bezierCurveTo() | 創建三次方貝塞爾曲線 |
| arc() | 創建弧/曲線（用於創建圓形或部分圓） |
| arcTo() | 創建兩切線之間的弧/曲線 |
| isPointInPath() | 如果指定的點位於當前路徑中，則返回 true，否則返回 false |
轉換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖至更大或更小 |
| rotate() | 旋轉當前繪圖 |
| translate() | 重新映射畫布上的 (0,0) 位置 |
| transform() | 替換繪圖的當前轉換矩陣 |
| setTransform() | 將當前轉換重置爲單位矩陣。然後運行 transform() |
文本
| 屬性 | 描述 |
|---|---|
| font | 設置或返回文本內容的當前字體屬性 |
| textAlign | 設置或返回文本內容的當前對齊方式 |
| textBaseline | 設置或返回在繪製文本時使用的當前文本基線 |
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪製“被填充的”文本 |
| strokeText() | 在畫布上繪製文本（無填充） |
| measureText() | 返回包含指定文本寬度的對象 |
圖像繪製
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪製圖像、畫布或視頻 |
像素操作
| 屬性 | 描述 |
|---|---|
| width | 返回 ImageData 對象的寬度 |
| height | 返回 ImageData 對象的高度 |
| data | 返回一個對象，其包含指定的 ImageData 對象的圖像數據 |
| 方法 | 描述 |
|---|---|
| createImageData() | 創建新的、空白的 ImageData 對象 |
| getImageData() | 返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據 |
| putImageData() | 把圖像數據（從指定的 ImageData 對象）放回畫布上 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設置或返回繪圖的當前 alpha 或透明值 |
| globalCompositeOperation | 設置或返回新圖像如何繪製到已有的圖像上 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當前環境的狀態 |
| restore() | 返回之前保存過的路徑狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
1.樣式設置：
canvas元素繪製圖像的時候有兩種方法，分別是
context.fill()//填充
context.stroke()//繪製邊框
style: 在進行圖形繪製前，要設置好繪圖的樣式
（1）context.fillStyle//填充的樣式
定義和用法
fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。
| 默認值： | #000000 |
|---|---|
| JavaScript 語法： | context.fillStyle=color|gradient|pattern; |
屬性值
| 值 | 描述 |
|---|---|
| color | 指示繪圖填充色的 CSS 顏色值。默認值是 #000000。 |
| gradient | 用於填充繪圖的漸變對象（線性或放射性） |
| pattern | 用於填充繪圖的 pattern 對象 |
實例 1
定義從上到下的漸變，作爲矩形的填充樣式：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.<strong>createLinearGradient</strong>(0,0,0,170);
my_gradient.<strong>addColorStop</strong>(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);實例 2
定義從黑到紅到白的的漸變，作爲矩形的填充樣式：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.<strong>createLinearGradient</strong>(0,0,170,0);
my_gradient.<strong>addColorStop</strong>(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);實例 3
用到的圖像：
使用圖像來填充繪圖：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.<strong>createPattern</strong>(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
定義和用法
strokeStyle 屬性設置或返回用於筆觸的顏色、漸變或模式。
| 默認值： | #000000 |
|---|---|
| JavaScript 語法： | context.strokeStyle=color|gradient|pattern; |
屬性值
| 值 | 描述 |
|---|---|
| color | 指示繪圖筆觸顏色的 CSS 顏色值。默認值是 #000000。 |
| gradient | 用於填充繪圖的漸變對象（線性或放射性） |
| pattern | 用於創建 pattern 筆觸的 pattern 對象 |
實例 1
繪製一個矩形。使用漸變筆觸：
<span style="font-family: Consolas, 'Courier New', Courier, monospace; white-space: normal; color: rgb(51, 51, 51); font-size: 13px; line-height: 23px;">var c=document.getElementById("myCanvas");</span>var ctx=c.getContext("<span style="font-family: Consolas, 'Courier New', Courier, monospace;">2d");</span>var gradient=ctx.createLinearGradient(0,0,170,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // 用漸變進行填充 ctx.strokeStyle=gradient; ctx.lineWidth=5; ctx.strokeRect(20,20,150,100);
實例 2
用一個漸變筆觸來寫文本 "w3school.com.cn"：
var ctx=c.getContext("2d");
ctx.<strong>font</strong>="30px Verdana";
// 創建漸變
var gradient=ctx.<strong>createLinearGradient</strong>(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用漸變進行填充
ctx.strokeStyle=gradient;
ctx.<strong>strokeText</strong>("Big smile!",10,50);
（3） context.lineWidth/lineCap/lineJoin/lineLimit //圖形邊框寬度,線段樣式
lineWidth 屬性設置或返回當前線條的寬度，以像素計。
| 默認值： | 1 |
|---|---|
| JavaScript 語法： | context.lineWidth=number; |
屬性值
| 值 | 描述 |
|---|---|
| number | 當前線條的寬度，以像素計。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);
lineCap 屬性設置或返回線條末端線帽的樣式。 註釋："round" 和 "square" 會使線條略微變長。
| 默認值： | butt |
|---|---|
| JavaScript 語法： | context.lineCap="butt|round|square"; |
屬性值
| 值 | 描述 |
|---|---|
| butt | 默認。向線條的每個末端添加平直的邊緣。 |
| round | 向線條的每個末端添加圓形線帽。 |
| square | 向線條的每個末端添加正方形線帽。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.<strong>stroke</strong>();
lineJoin 屬性設置或返回所創建邊角的類型，當兩條線交匯時。註釋：值 "miter" 受 miterLimit 屬性的影響。
| 默認值： | miter |
|---|---|
| JavaScript 語法： | context.lineJoin="bevel|round|miter"; |
屬性值
| 值 | 描述 |
|---|---|
| bevel | 創建斜角。 |
| round | 創建圓角。 |
| miter | 默認。創建尖角。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.<strong>moveTo</strong>(20,20);
ctx.<strong>lineTo</strong>(100,50);
ctx.lineTo(20,100);
ctx.<strong>stroke</strong>();miterLimit 屬性設置或返回最大斜接長度。斜接長度指的是在兩條線交匯處內角和外角之間的距離。
提示：只有當 lineJoin 屬性爲 "miter" 時，miterLimit 纔有效。
邊角的角度越小，斜接長度就會越大。
爲了避免斜接長度過長，我們可以使用 miterLimit 屬性。
如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示（圖解 3）：
| 默認值： | 10 |
|---|---|
| JavaScript 語法： | context.miterLimit=number; |
屬性值
| 值 | 描述 |
|---|---|
| number |
正數。規定最大斜接長度。 如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
（4） 陰影 context.shadowBlur/shadowColor/shadowOffsetX/shadowOffsetY
shadowColor 屬性設置或返回用於陰影的顏色。
註釋：請將 shadowColor 屬性與 shadowBlur 屬性一起使用，來創建陰影。
提示：請通過使用 shadowOffsetX 和 shadowOffsetY 屬性來調節陰影效果。
| 默認值： | #000000 |
|---|---|
| JavaScript 語法： | context.shadowColor=color; |
屬性值
| 值 | 描述 |
|---|---|
| color | 用於陰影的 CSS 顏色值。默認值是 #000000。 |
shadowBlur 屬性設置或返回陰影的模糊級數。
| 默認值： | #000000 |
|---|---|
| JavaScript 語法： | context.shadowBlur=number; |
屬性值
| 值 | 描述 |
|---|---|
| number | 陰影的模糊級數 |
shadowOffsetX/Y 屬性設置或返回形狀與陰影的水平距離。
shadowOffsetX=0 指示陰影位於形狀的正下方。
shadowOffsetX=20 指示陰影位於形狀 left 位置右側的 20 像素處。
shadowOffsetX=-20 指示陰影位於形狀 left 位置左側的 20 像素處。
提示：如需調整距離形狀的垂直位置，請使用 shadowOffsetY 屬性。
| 默認值： | 0 |
|---|---|
| JavaScript 語法： | context.shadowOffsetX=number; |
屬性值
| 值 | 描述 |
|---|---|
| number | 正值或負值，定義陰影與形狀的水平距離。 |
實例：設置矩形陰影
<pre name="code" class="html">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
（5）漸變方法 creatLinearGradient()/creatRadialGradient()/addColorStop()
createLinearGradient() 方法創建線性的漸變對象。
漸變可用於填充矩形、圓形、線條、文本等等。
提示：請使用該對象作爲 strokeStyle 或 fillStyle 屬性的值。
提示：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 對象中的何處定位顏色。
JavaScript 語法：
context.createLinearGradient(x0,y0,x1,y1);
參數值
| 參數 | 描述 |
|---|---|
| x0 | 漸變開始點的 x 座標 |
| y0 | 漸變開始點的 y 座標 |
| x1 | 漸變結束點的 x 座標 |
| y1 | 漸變結束點的 y 座標 |
createLinearGradient() 方法創建放射狀/圓形漸變對象。
漸變可用於填充矩形、圓形、線條、文本等等。
提示：請使用該對象作爲 strokeStyle 或 fillStyle 屬性的值。
提示：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 對象中的何處定位顏色。
JavaScript 語法：
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
參數值
| 參數 | 描述 |
|---|---|
| x0 | 漸變的開始圓的 x 座標 |
| y0 | 漸變的開始圓的 y 座標 |
| r0 | 開始圓的半徑 |
| x1 | 漸變的結束圓的 x 座標 |
| y1 | 漸變的結束圓的 y 座標 |
| r1 | 結束圓的半徑 |
addColorStop() 方法規定 gradient 對象中的顏色和位置。
addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。
註釋：您可以多次調用 addColorStop() 方法來改變漸變。如果您不對 gradient 對象使用該方法，那麼漸變將不可見。爲了獲得可見的漸變，您需要創建至少一個色標。
JavaScript 語法：
gradient.addColorStop(stop,color);
參數值
| 參數 | 描述 |
|---|---|
| stop | 介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。 |
| color | 在結束位置顯示的 CSS 顏色值 |
實例
通過多個 addColorStop() 方法來定義漸變：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
定義一個從黑到白的漸變，作爲矩形的填充樣式：
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);顏色的表示方式: 直接用顏色名稱:"red" "green" "blue"/十六進制顏色值: "#EEEEFF"/rgb(1-255,1-255,1-255)/rgba(1-255,1-255,1-255,透明度)
（6）模式填充 createPattern()
createPattern() 方法在指定的方向內重複指定的元素。元素可以是圖片、視頻，或者其他 <canvas> 元素。被重複的元素可用於繪製/填充矩形、圓形或線條等等。
JavaScript 語法：
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
參數值
| 參數 | 描述 |
|---|---|
| image | 規定要使用的圖片、畫布或視頻元素。 |
| repeat | 默認。該模式在水平和垂直方向重複。 |
| repeat-x | 該模式只在水平方向重複。 |
| repeat-y | 該模式只在垂直方向重複。 |
| no-repeat | 該模式只顯示一次（不重複）。 |
2.繪製矩形
參數值
| 參數 | 描述 |
|---|---|
| x | 矩形左上角的 x 座標 |
| y | 矩形左上角的 y 座標 |
| width | 矩形的寬度，以像素計 |
| height | 矩形的高度，以像素計 |
（1）rect(x,y,width,height)
rect() 方法創建矩形。提示：請使用 stroke() 或 fill() 方法在畫布上實際地繪製矩形。
（2）context.fillRect(x,y,width,height)
fillRect() 方法繪製“已填色”的矩形。默認的填充顏色是黑色。提示：請使用 fillStyle 屬性來設置用於填充繪圖的顏色、漸變或模式。
（3）strokeRect(x,y,width,height)
strokeRect() 方法繪製矩形（不填色）。筆觸的默認顏色是黑色。提示：請使用 strokeStyle 屬性來設置筆觸的顏色、漸變或模式。
（4）clearRect(x,y,width,height)
clearRect() 方法清空給定矩形內的指定像素。
實例：
在給定矩形內清空一個矩形：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);通過 rect() 方法來創建三個矩形：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 紅色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// 綠色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// 藍色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();繪製 150*100 像素的已填充矩形：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
繪製
150*100 像素的矩形：
<span style="font-size:10px;">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);</span>3.繪製路徑
（1）開始路徑繪製函數 beginPath()----一般放在最前面，創建一個路徑其實點，表示將要開始繪製路徑
beginPath() 方法開始一條路徑，或重置當前的路徑,創建一個路徑起始點。
提示：請使用這些方法來創建路徑：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
提示：請使用 stroke() 方法在畫布上繪製確切的路徑。
（2）繪製路徑/填充路徑 stroke()/fill()-------一般確定好路徑之後使用，進行路徑的繪製
stroke() 方法會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。提示：請使用 strokeStyle 屬性來繪製另一種顏色/漸變。
fill() 方法填充當前的圖像（路徑）。默認顏色是黑色。 提示：請使用 fillStyle 屬性來填充另一種顏色/漸變。
註釋：如果路徑未關閉，那麼 fill() 方法會從路徑結束點到開始點之間添加一條線，以關閉該路徑，然後填充該路徑。
（3）確定路徑-----moveTo()/lineTo()/closePath()
注意：canvas畫布中，座標（0,0）在左上角，x軸向下，y軸向右
context.moveTo(x,y); //移動路徑到座標（x,y）
context.lineTo(x,y); //lineTo() 方法添加一個新點(x,y)，然後創建從該點到畫布中最後指定點的線條。
context.closePath(); //closePath() 方法創建從當前點到開始點的路徑。
context.isPointInPath(x,y); //isPointInPath() 方法返回 true，如果指定的點位於當前路徑中；否則返回 false。
實例：
繪製一條路徑，形狀是字母
L：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();繪製一條路徑，形式是字母 L，然後繪製線條以返回開始點，並填充綠色：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();在畫布上繪製兩條路徑；紅色和藍色：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 紅色路徑
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 進行繪製
ctx.beginPath();
ctx.strokeStyle="blue"; // 藍色路徑
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 進行繪製繪製一個矩形，如果點 20,50 位於當前路徑中：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
ctx.stroke();
};（4）圓弧和曲線的繪製：
二次貝塞爾曲線：---quadraticCurveTo(cpx,xpy,x,y) 方法通過使用表示二次貝塞爾曲線的指定控制點，向當前路徑添加一個點。
二次貝塞爾曲線需要兩個點。第一個點是用於二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用 beginPath() 和 moveTo() 方法來定義開始點。
- 開始點：moveTo(20,20)
- 控制點：quadraticCurveTo(20,100,200,20)
- 結束點：quadraticCurveTo(20,100,200,20)
| 參數 | 描述 |
|---|---|
| cpx | 貝塞爾控制點的 x 座標 |
| cpy | 貝塞爾控制點的 y 座標 |
| x | 結束點的 x 座標 |
| y | 結束點的 y 座標 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
三次貝塞爾曲線：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 方法通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點。
| 參數 | 描述 |
|---|---|
| cp1x | 第一個貝塞爾控制點的 x 座標 |
| cp1y | 第一個貝塞爾控制點的 y 座標 |
| cp2x | 第二個貝塞爾控制點的 x 座標 |
| cp2y | 第二個貝塞爾控制點的 y 座標 |
| x | 結束點的 x 座標 |
| y | 結束點的 y 座標 |
三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用 beginPath() 和 moveTo() 方法來定義開始點。
- 開始點：moveTo(20,20)
- 控制點 1：bezierCurveTo(20,100,200,100,200,20)
- 控制點 2：bezierCurveTo(20,100,200,100,200,20)
- 結束點：bezierCurveTo(20,100,200,100,200,20)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();圓弧線：arc(x,y,r,sangle,eangle,counterclockwise) 方法創建弧/曲線（用於創建圓或部分圓）。
| 參數 | 描述 |
|---|---|
| x | 圓的中心的 x 座標。 |
| y | 圓的中心的 y 座標。 |
| r | 圓的半徑。 |
| sAngle | 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。 |
| eAngle | 結束角，以弧度計。 |
| counterclockwise | 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 結束角：arc(100,7
兩切線之間的弧：---arcTo(x1,y1,x2,y2,r) 方法在畫布上創建介於兩個切線之間的弧/曲線。
| 參數 | 描述 |
|---|---|
| x1 | 弧的起點的 x 座標 |
| y1 | 弧的起點的 y 座標 |
| x2 | 弧的終點的 x 座標 |
| y2 | 弧的終點的 y 座標 |
| r | 弧的半徑 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // 創建開始點
ctx.lineTo(100,20); // 創建水平線
ctx.arcTo(150,20,150,70,50); // 創建弧
ctx.lineTo(150,120); // 創建垂直線
ctx.stroke(); // 進行繪製(4) 剪切畫布----clip()
clip() 方法從原始畫布中剪切任意形狀和尺寸。
提示：一旦剪切了某個區域，則所有之後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）。您也可以在使用 clip() 方法前通過使用 save() 方法對當前畫布區域進行保存，並在以後的任意時間對其進行恢復（通過 restore() 方法）。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形區域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之後繪製綠色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);