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/