zoukankan      html  css  js  c++  java
  • canvas学习绘制文字

    1.文字的绘制方法

    strokeText("文字",x,y,maxWith)  绘制(描边)空心文字

    fillText("文字",x,y,maxWith) 绘制实心

    字体样式 font(大小 字体 ...)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            canvas{background:#A9A9A0;}
        </style>
    </head>
    <body>
        <canvas id="bcanvas" width="800" height="800">
            您的浏览器暂不支持HTML5的canvas元素
        </canvas>
        <script type="text/javascript">
            var canvas=document.getElementById('bcanvas');
            var pi=canvas.getContext('2d');
            pi.lineWidth=2;
            pi.strokeStyle="yellow";
            pi.fillStyle="orange";
            pi.moveTo(400,500);
            pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
            pi.closePath();
            pi.fill();
            pi.beginPath();
            pi.strokeStyle="orange";
            pi.fillStyle="#A9A9A0";
            pi.moveTo(400,500);
            pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
            pi.closePath();
            pi.fill();
            pi.beginPath();
            pi.lineWidth=1;
            pi.strokeStyle="green";
            pi.fillStyle="red";
            pi.font="60px 隶书";
            pi.strokeText("纵",375,270);
            pi.fillText("横",375,340);
            pi.strokeText("横",375,340);
            pi.font="60px 仿宋"
            pi.strokeText("横",375,410);
        </script>
    </body>
    </html>
     
    

      

  • 相关阅读:
    把本地的jar包安装到maven库中
    mybatis 查询
    freemarker
    python——线程相关
    【python-sql】sql操作时遇到的坑
    专项测试——移动app安装包检测
    【Android端 adb相关】adb相关总结
    for 语句
    Python2.x与3​​.x版本区别
    Python 运算符
  • 原文地址:https://www.cnblogs.com/liao13160678112/p/6401102.html
Copyright © 2011-2022 走看看