zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    4.2编写第一个servlet(500错误解决)超级开心
    springmvc文件上传下载
    找出字符串中不重复字符的最长子串的长度
    微信小程序接入,https服务器搭建和调试
    js常用写法
    通过条件删除标签
    xml的修改遍历,以及建立
    shelve模块
    dump与load
    locate,find,df,mount,du命令
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/5260195.html
Copyright © 2011-2022 走看看