于學習js是為爬蟲服務，所以canvas繪圖學習并不完整。

第15章 使用Canvas繪圖

15.1 基本用法

HTML文件中需要有canvas元素，兩標簽之間的文字是瀏覽器不支持時顯示的。

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

要在網頁中顯示canvas繪制的圖像，只需要在畫布上繪制圖形即可：

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

if (drawing.getContext){
    var context = drawing.getContext("2d");

    context.fillStyle = "#0000ff";
    context.fillRect(10,10,50,50);

    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

也可以通過toDataURL輸出到圖像，并創建新的img：

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

// 取得圖像的數據URI
var imgURI = drawing.toDataURL("image/png");
// 顯示圖像

var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

15.2 2D上下文

15.2.1 填充和描邊

可通過strokeStyle和fillStyle屬性進行設置

var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";

設置屬性有以下幾種：

"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";

15.2.2 繪制矩形

繪制矩形有fillRect（帶有填充）、strokeRect（無填充）、clearRect（除清矩形區域）三個方法，單位為像素：

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

if (drawing.getContext){
    var context = drawing.getContext("2d");
    // 紅色的矩形

    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    // 半透明的矩形

    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

15.2.3 繪制路徑

以beginPath()方法開始，然后接著繪制以下線條：

• arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結束角度（用弧度表示）分別為startAngle 和endAngle。最后一個參數表示
• startAngle 和endAngle 是否按逆時針方向計算，值為false表示按順時針方向計算。
• arcTo(x1, y1, x2, y2, radius)：從上一點開始繪制一條弧線，到(x2,y2)為止，并且以給定的半徑radius 穿過(x1,y1)。
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點開始繪制一條曲線，到(x,y)為止，并且以(c1x,c1y)和(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()所繪制的獨立的形狀。

路徑創建完以后，有多種結尾方式：

• closePath()會自動與起點連接；
• fill()會自動以fillStyle填充區域；
• stroke()會對線條描邊；
• clip()創建一個剪切區域。

15.2.4 繪制文本

方法：

fillText()
strokeText()

屬性：

font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom