H5海报绘制 canvas描边文字

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

    //先设置文字字体和大小
    ctx.font = "40px 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种描边效果的区分：简要来说就是：实心与空心谁后写，谁的效果更大！

    //渐变边框颜色
   
    ctx.font = "20px Georgia";
    ctx.strokeText("Hello World!", 10, 50);

    ctx.font = "30px Verdana";

    // Create gradient
    var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");

    // Fill with gradient
    ctx.strokeStyle = gradient;
    ctx.strokeText("Big smile!", 10, 90);
</script>