zoukankan      html  css  js  c++  java
  • HTML5 canvas文本属性与方法

    文本属性和方法
    font                        设置或返回文本内容的当前字体属性

    textAlign                设置或返回文本内容的当前对齐方式
    start         默认。文本在指定的位置开始。
    end         文本在指定的位置结束。
    center         文本的中心被放置在指定的位置。
    left         文本左对齐。
    right         文本右对齐。

    textBaseline        设置或返回在绘制文本时使用的当前文本基线
    alphabetic         默认。文本基线是普通的字母基线。
    top         文本基线是 em 方框的顶端。。
    hanging         文本基线是悬挂基线。
    middle         文本基线是 em 方框的正中。
    ideographic         文本基线是表意基线。
    bottom         文本基线是 em 方框的底端。


    fillText(text,x,y,maxWidth)                在画布上绘制“被填充的”文本
    text         规定在画布上输出的文本。
    x         开始绘制文本的 x 坐标位置(相对于画布)。
    y         开始绘制文本的 y 坐标位置(相对于画布)。
    maxWidth         可选。允许的最大文本宽度,以像素计。

    strokeText(text,x,y,maxWidth)        在画布上绘制文本(无填充)
    text         规定在画布上输出的文本。
    x         开始绘制文本的 x 坐标位置(相对于画布)。
    y         开始绘制文本的 y 坐标位置(相对于画布)。
    maxWidth         可选。允许的最大文本宽度,以像素计。

    measureText()        返回包含指定文本宽度的对象
    context.measureText(text).width;        text 要测量的文本。

        <canvas id="e" width="500" height="450" style="border:1px solid #000"></canvas>
        <script type="text/javascript">
        var a=document.getElementById("e");
        var ctx=a.getContext("2d");
        ctx.font="40px 宋体";                //设置或返回文本内容的当前字体属性
        ctx.textAlign="center";                //设置或返回文本内容的当前对齐方式
        ctx.textBaseline="middle";        //设置或返回在绘制文本时使用的当前文本基线
        var grd=ctx.createLinearGradient(50,50,150,50);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.3,"blue");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(0.7,"yellow");
        grd.addColorStop(1,"black");
        ctx.fillStyle=grd;
        ctx.fillText("MINSONG",100,50);        //在画布上绘制“被填充的”文本
    
        ctx.font="60px 宋体";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        var grd=ctx.createLinearGradient(100,50,350,50);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.3,"blue");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(0.7,"yellow");
        grd.addColorStop(1,"black");
        ctx.strokeStyle=grd;
        var txt="ZHANGSHENG";
        ctx.fillText(""+ctx.measureText(txt).width,180,300);        //返回包含指定文本宽度的对象
        ctx.strokeText(txt,200,150);        //在画布上绘制文本(无填充)
        </script>
    

     

  • 相关阅读:
    一些C++11语言新特性
    项目管理计划应该包括哪些内容
    真相令人震惊!为什么越有钱的人,欠的钱越多?
    80后小伙返乡创业种植中药材,带领乡亲们脱贫致富
    Tableau
    知识点汇总
    决策树分析、EMV(期望货币值)
    信息系统项目管理师60天冲刺复习计划,2019下半年高项冲刺计划
    【系统分析师之路】系统分析师备考计划
    有一种规律:“劣币驱逐良币”,“坏人淘汰好人”(深度)
  • 原文地址:https://www.cnblogs.com/ricesm/p/5067011.html
Copyright © 2011-2022 走看看