HTML5的學習之canvas畫布(四)

HTML5的學習之canvas畫布

這篇博客繼續學習canvas的文字相關屬性和方法。

屬性

屬性	描述
font	設置或返回文本內容的當前字體屬性。
textAlign	設置或返回文本內容的當前對齊方式。
textBaseline	設置或返回在繪製文本時使用的當前文本基線。

方法

方法	描述
fillText()	在畫布上繪製"被填充的"文本。
strokeText()	在畫布上繪製文本（無填充）。
measureText()	返回包含指定文本寬度的對象。

使用canvas繪製藝術字

HTML代碼：

    <canvas id="my_canvas"></canvas>

JavaScript代碼：

    // 1.獲取元素
    var oCanvas = document.getElementById("my_canvas");
    // 2.設置畫布大小
    oCanvas.width = "1000";
    oCanvas.height = "1000";
    // 3.獲取 畫布環境
    var myCanvas = oCanvas.getContext("2d");
    // 4.繪圖
    var linearGra=myCanvas.createLinearGradient(20,100,500,500)
    linearGra.addColorStop(0,"red");
    linearGra.addColorStop(0.2,"yellow");
    linearGra.addColorStop(0.4,"blue");
    linearGra.addColorStop(0.6,"green");
    linearGra.addColorStop(0.8,"purple");
    linearGra.addColorStop(1.0,"skyblue");
    
    // 文字 context.font="italic small-caps bold 12px arial";
    myCanvas.font="60px heiti";
    // 空心文字 context.strokeText(text,x,y,maxWidth);
    myCanvas.strokeStyle=linearGra;
    myCanvas.strokeText("HELLO CHINA",20,100,200);
    // 填充文字 context.fillText(text,x,y,maxWidth);
    myCanvas.fillStyle=linearGra;
    myCanvas.fillText("HELLO CHINA",20,200,200);

視頻講解鏈接：
https://www.bilibili.com/video/BV1vg4y1i7U4/