登录  /  注册
首页 > web前端 > H5教程 > 正文

HTML5 Canvas实现文本对齐的方法总结_html5教程技巧

php中文网
发布: 2016-05-16 15:51:59
原创
1583人浏览过

水平对齐textalign

JavaScript Code复制内容到剪贴板
  1. context.textAlign="center|end|left|right|start";  

其中各值及意义如下表。

描述
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐,
right 文本右对齐。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.      "UTF-8">   
  5.     textAlign   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.        
  
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         // 在位置 400 创建蓝线   
  •         context.strokeStyle="blue";   
  •         context.moveTo(400,100);   
  •         context.lineTo(400,500);   
  •         context.stroke();   
  •   
  •   
  •         context.fillStyle = "#000";   
  •         context.font="50px Arial";   
  •   
  •         // 显示不同的 textAlign 值   
  •         context.textAlign="start";   
  •         context.fillText("textAlign=start", 400, 120);   
  •         context.textAlign="end";   
  •         context.fillText("textAlign=end", 400, 200);   
  •         context.textAlign="left";   
  •         context.fillText("textAlign=left", 400, 280);   
  •         context.textAlign="center";   
  •         context.fillText("textAlign=center", 400, 360);   
  •         context.textAlign="right";   
  •         context.fillText("textAlign=right", 400, 480);   
  •     };   
  •   
  •   
  •   
  • 运行结果:
    2016324114332033.jpg (850×500)

    垂直对齐textBaseline

    JavaScript Code复制内容到剪贴板
    1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

    其中各值及意义如下表。

    描述
    alphabetic 默认。文本基线是普通的字母基线。
    top 文本基线是em方框的顶端。
    hanging 文本基线是悬挂基线。
    middle 文本基线是em方框的正中。
    ideographic 文本基线是表意基线。
    bottom 文本基线是em方框的底端。

    首先咱们通过一个图来看一下各个基线代表的位置。
    2016324114358024.gif (600×268)

    我们通过一个例子来直观的感受一下。

    JavaScript Code复制内容到剪贴板
    1. nbsp;html>   
    2. "zh">   
    3.   
    4.      "UTF-8">   
    5.     textBaseline   
    6.     
    7.         body { background: url("./images/bg3.jpg") repeat; }  
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    9.        
    10.   
    11.   
    12. "canvas-warp">   
    13.     "canvas">   
    14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
    15.        
      
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         //在位置 y=300 绘制蓝色线条   
  •         context.strokeStyle="blue";   
  •         context.moveTo(0,300);   
  •         context.lineTo(800,300);   
  •         context.stroke();   
  •   
  •         context.fillStyle = "#00AAAA";   
  •         context.font="20px Arial";   
  •   
  •         //在 y=300 以不同的 textBaseline 值放置每个单词   
  •         context.textBaseline="top";   
  •         context.fillText("Top",150,300);   
  •         context.textBaseline="bottom";   
  •         context.fillText("Bottom",250,300);   
  •         context.textBaseline="middle";   
  •         context.fillText("Middle",350,300);   
  •         context.textBaseline="alphabetic";   
  •         context.fillText("Alphabetic",450,300);   
  •         context.textBaseline="hanging";   
  •         context.fillText("Hanging",550,300);   
  •     };   
  •   
  •   
  •   
  • 运行结果:
    2016324114419550.jpg (850×500)

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    收藏 点赞
    上一篇:HTML5仿手机微信聊天界面_html5教程技巧 下一篇:使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5教程技巧
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号