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

    概念:

    在HTML5中可以在Canvas画布中进行文字的绘制,

    发同时也可以指定绘制文字的字体、大小、对齐方式等,还可以进行文字的纹理填充。。

    绘制文字时可以使用fillText方法或strokeText方法:

    前者用填充方式绘制字符串

    void fillText(text,x,y,[maxWidth]);

    第一个参数表示要绘制的文字,第二个参数表示要绘制文字的起点横坐标,第三个参数表示要绘制文字的起点纵坐标,第四个参数表示可选参数,表示显示文字时的最大宽度。

    后者用轮廓方式绘制字符串。

    void strokeText(text,x,y,[maxWidth]);

    该方法参数部分的解释与fillText方法相同。

    在shiy Canvas API来进行文字的绘制之前,可以先对该对象的有关文字绘制的属性进行设置,他们是:

    font属性:设置文字字体

    textAlign属性:设置文字水平对齐方式,属性值可以为start、end、left、right、center。默认值为start。

    textBaseline属性:设置文字垂直对齐方式,属性值可以为top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic

    应用:

    完整代码

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #myCanvas{
    border: 1px solid blue;
    background-color: #77ffcc;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var canvas=document.getElementById("myCanvas");
    if(canvas==null)
    return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "#0000ff";
    context.font = 'italic 30px sans-serif';
    context.textBaseline = 'top';
    //填充字符串
    context.fillText('示例文字',0,0);
    context.font = 'bold 30px sans-serif';
    //轮廓字符串
    context.strokeText('示例文字',0,50);
    }
    </script>
    </head>
    <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    </body>
    </html>

    显示效果

  • 相关阅读:
    EasyMvc入门教程-高级控件说明(17)对话框控件
    EasyMvc入门教程-高级控件说明(16)信息框控件
    EasyMvc入门教程-高级控件说明(15)方位布局控件
    EasyMvc入门教程-高级控件说明(14)列布局控件
    Java5,6,7新特性
    C#文件压缩类
    FTP文件上传下载(C#)
    linux常见的系统故障排除
    sudo命令
    日志系统
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11366697.html
Copyright © 2011-2022 走看看