Canvas，是螢幕上一個由JavaScript控制的即時模式點陣圖區域，即時模式是指在畫布上呈現畫素的方式，canvas通過JavaScript呼叫canvas API，在每一幀中完全重繪螢幕上的點陣圖。我們所要做的就是在每一幀渲染之前設定螢幕的顯示內容，這樣才能顯示正確的畫素。下面總結了幾種常繪製的圖形

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

一、矩形繪製

ctx.fillRect(x,y,width,height); //在位置(x,y)處繪製寬為width，高為height的填充矩形

ctx.strokeRext(x,y,width,height); //在位置(x,y)處繪製一個矩形邊框

ctx.fillStyle="#ffffaa";

ctx.strokeStyle="#000000";

二、線段繪製

首先了解線段所擁有的幾個點：

（1）開始、結束、繪畫

beginPath,closePath,stroke()

（2）lineCap屬性 定義上下文中線的端點，butt,round,square

（3）lineJoin屬性 定義兩條相交線產生的拐角，miter,level,round

（4）linewidth屬性 定義線的寬度

（5）strokeStyle屬性 定義線和形狀邊框的顏色和樣式

1. 圓形端點，斜角連線，在畫布左上角

 ctx.strokeStyle = “black”;

ctx.lineWidth = 10;

ctx.lineJoin = “bevel”;

ctx.lineCap = “round”;

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(25,0);

ctx.line(25,25);

ctx.stroke();

ctx.closePath();

2.圓形端點，斜角連線，不在畫布左上角

ctx.beginPath();

ctx.moveTo(10,50);

ctx.lineTo(35,50);

ctx.lineTo(35,75);

ctx.stroke();

ctx.closePath();

3.平直端點，圓形連線，不在畫布左上角

ctx.lineJoin = “round”;

ctx.lineCap = “butt”;

ctx.beginPath();

ctx.moveTo(10,100);

ctx.lineTo(35,100);

ctx.lineTo(35,125);

ctx.stroke();

ctx.closePath();

三、弧形繪製

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x和y定義圓心的位置，radius定義弧線的半徑，startAngle和endAngle使用弧度值，而不是角度值，anticlockwise的值可以是true或false，用於定義弧線的方向。例如：繪製一個圓心在（100,100）,半徑為20的圓

ctx.arc(100,100,20,(math.PI/180)*0,(Math.PI/180)*360,false)

四、貝塞爾曲線

立方：ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

平方:  ctx.quadraticCurveTo(cpx,cpy,x,y)