当前位置:编程学习 > JS >>

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 易做图ile!", 10, 90);
</script>
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,