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>

    显示效果

  • 相关阅读:
    马克思主义哲学是否只是“抄袭”和断章取义了别人的思想
    马克思的思想说到底都是抄袭
    答郭沫若的《卖淫妇的饶舌》(节录)--马克思思想批判
    联系的普遍性
    辩证
    (实用篇)使用PHP生成PDF文档
    discuz!
    Access是什么?
    putty 与winscp 区别
    xshell 与 putty
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11366697.html
Copyright © 2011-2022 走看看