canvas 畫布 文字描邊

總結一下，canvas 畫布 文字描邊的2種方法以及其不同的視覺效果：

 

效果圖：

 

具體代碼：

<canvas id="canvas" width="800" height="440" style="background:black;"></canvas>
<script>
    var c = document.getElementById("canvas"),
        ctx = c.getContext("2d");

    //先設置文字字體和大小
    ctx.font = "4.2rem Open Sans,Microsoft YaHei";

    //設置畫筆（繪制線條）操作的線條寬度，非必須；如果不寫這句，那就是默認1
    ctx.lineWidth = 3;

    //實線文字
    ctx.fillStyle = "green";
    ctx.fillText("實線(實心)文字：fill",10,100);

    //空心文字
    ctx.strokeStyle = "red";
    ctx.strokeText("空心文字:stroke",10,200);

    //描邊文字：實線與空心文字合起來就是描邊啦！先寫空心的和先寫實心的視覺效果不同：
    //1.空心+實心
    ctx.strokeStyle = "red";
    ctx.strokeText("描邊：stroke+fill",10,300);
    ctx.fillStyle = "green";
    ctx.fillText("描邊：stroke+fill",10,300);

    //2.實心+空心
    ctx.fillStyle = "green";
    ctx.fillText("描邊：fill+stroke",10,400);
    ctx.strokeStyle = "red";
    ctx.strokeText("描邊：fill+stroke",10,400);

    //2種描邊效果的區分：簡要來說就是：實心與空心誰后寫，誰的效果更大！

</script>