使用HTML5中<canvas>元素可以在頁面中設定一個區域，然後通過JavaScript動態地在這個區域中繪制圖形，要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文，而取得繪圖上下對象的引用，需要調用getContext()方法並傳入上下文的名字。傳入“2d”，就可以取得2D上下文對象。因此，在使用<canvas>元素前，首先要檢測getContext()方法是否存在。

<canvas id="drawing" width="400" height="400">A drawing of something</canvas>

<script>

var drawing = document.getElementById("drawing");
if(drawing.getContext){
    //需要執行的代碼
}
</script>

繪制矩形

與繪制矩形相關的方法：fillRect()、strokeRect()、clearRact()，這三個方法都接收四個參數：矩形的x坐標、矩形的y坐標、矩形的寬度和矩形的高度。

其中fillRect()方法在畫布上繪制的矩形會填充指定的顏色，fillStyle用於填充顏色，對在其後面的fillRect有效，能被後面的fillStyle覆蓋。

content.fillStyle = "
 
#ff0000"
content.fillRect(10,10,50,50);
        
content.fillStyle = "rgba(0,0,255,0.5)"
content.fillRect(30,30,50,50);

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

content.strokeStyle = ‘yellow‘;
content.strokeRect(80,80,50,50);

content.strokeStyle = ‘rgba(255,0,0,0.5)‘
content.strokeRect(100,100,50,50);

clearRect()方法用於清除畫布上的矩形區域，本質上，這個方法可以把繪制上下文中的某一矩形區域變透明，通過繪制形狀然後清除指定區域，就可以生成有意思的效果。

content.clearRect(40,40,10,10);

繪制路徑

要繪制路徑，首先必須調用beginPath()方法，表示要開始繪制新路徑，然後，再通過調用下列方法來實際地繪制路徑。

• x1,y1,x2,y2,radius)：從上一點開始繪制一條弧線，直到(x2,y2)為止，並且以給定的半徑radius穿過(x1,y1)。
• c1x,c1y,c2x,c2y,x,y)：從上一點開始繪制一條曲線，到(x,y)為止，並且以(cx,cy)和(c2x,c2y)作為控制點。
• lineTo(x,y)：從上一點開始繪制一條直線，到(x,y)為止。
• moveTo(x,y)：將繪圖遊標移動到(x,y)，不畫線。
• quadraticCurveTo(cx,cy,x,y)：從上一點開始繪制一條二次曲線，到(x,y)為止，並且以(cx,cy)作為控制點。
• rect(x,y,width,height)：從點(x,y)開始繪制一個矩形，寬高由width和height指定，這個方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨立的形狀。

<canvas id="path" width="400" height="400">A drawing of something</canvas>
<script>
　　var drawing2 = document.getElementById("path");
   if(drawing2.getContext){
        var path = drawing2.getContext(‘2d‘);
　　　　//開始路徑
        path.beginPath();
        //繪制外圓（以（100,100）為圓心,99為半徑順時針繪制一條弧線）
        path.arc(100,100,99,0,2*Math.PI,false);
        // 在繪制內圓之前，將路徑移動到外圓上的某一點上，以避免繪制出多余的線條。（？）
         path.moveTo(194,100);

        //繪制內圓
        path.arc(100,100,94,0,2*Math.PI,false);
        path.moveTo(100,100);
        path.lineTo(100,20);
        path.moveTo(100,100);
        path.lineTo(35,100);
        //描邊路徑：將圖形繪制到畫布上
        path.stroke();
    }
</script>

繪制文本

繪制文本主要有fillText()和strokeText()兩個方法，其中fillText()方法使用fillStyle屬性繪制文本，strokeText()方法使用strokeStyle屬性為文本描邊。這兩個方法都可以接收四個參數：要繪制的文本字符串、橫縱坐標和可選的最大像素寬度，這兩個方法都以下列3個屬性為基礎。

• font：表示文本樣式、大小以字體，用css中指定字體的格式來指定，例如"14px Arial"。
• textAlign：文本對齊方式，可能的值有"start"、"end"、"left"、"right"、"center"。
• textBaseline：表示文本的基線，可能的值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"。

path.font = "bold 14px Arial";
        path.textAlign = "center";
        path.textBaseline = "millde";
        //前面兩個值決定了坐標為文本水平和垂直中點的坐標
        path.fillText("12",100,20);

        path.textAlign = "start";
        // x值代表文本左端的位置
        path.fillText("3",100,40);

        path.textAlign = "end";
        // x值代表文本右端的位置
        path.fillText("9",100,60);

canvas基礎一