网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
全日制暑期班火热招生中!
网络营销,淘宝培训课程优惠
绘制简单文字效果《HTML5系列教程22》

来源:新川教育 阅读数:3705
添加时间:2017-5-8   类别:网页设计教程

体育彩票31选7开奖福建:绘制简单文字效果《HTML5系列教程22》

福建31选7开奖时间 www.tzh2.cn 在HTML5中如何控制文本的字体、大小和样式

    文字内容在网页是必不可少的重要内容,我们可以在HTML中直接输入文字,也可以通过Canvas设置文字的字体、大小和样式,在网页中呈现并绘制简单文字效果。这次我们主要介绍在HTML5中利用Canvas如何控制文本的字体大小、颜色、描边、对齐等方法。


如何控制文本的字体、大小和样式

    Canvas提供了设置文字字体、大小和样式的函数,这个函数就是font,此函数可以有5个参数,依次代表文字的字体样式、字体变体、字体粗细、字体大小和字体系列,下图就是font函数的应用代码示例

font函数的应用代码示例

    font函数的详细描述参照下图表

font函数的详细描述

    设置了文字的字体、大小和样式后,最好通过fillText函数完成文字的绘制。通过Canvas绘制文字的代码如图:

在HTML5中为字体设置大小和样式的代码示例

    在谷歌浏览器中预览的效果:

在HTML5中为字体设置大小和样式的预览示例

如何控制文本的颜色

    Canvas中有两种方法可用于改变文本的颜色,一种是通过fillstyle函数设置文本的填充颜色,另一种是通过createLinearGradient函数为文本填充渐变色??刂莆谋狙丈拇肴缦拢?/P>在HTML5中控制文本颜色的代码

    在谷歌浏览器中预览的效果:

在HTML5中控制文本颜色的效果预览

描绘文本的边缘

    要描绘字体的边缘效果,需要使用stroKeText函数替代fillText函数,同时要用stroKeStyle属性替代fillStyle属性。描绘文本边缘的代码如图:

在HTML5中描绘字体边缘效果代码

    在谷歌浏览器中预览的效果:

在HTML5中描绘字体边缘预览效果

文本对齐方式设置

    Canvas中文本的对齐功能使用textAlign属性进行控制,可供选择的选项包括start、end、left、center和right。对齐的位置是相对于一条虚拟的垂直线,这条线是由fillText()或strokeText()定义的文本X位置。默认情况下,textAlign属性被设置成start。

    文本被左对齐的情况包括:

        textAlign属性被设为left时;


        textAlign属性被设为start,且文档方向是ltr(left to right)时;


        textAlign属性被设为end,且文档方向是rtl(right to left)时;


    文本被右对齐的情况包括:

        textAlign属性被设为right时;


        textAlign属性被设为start,且文档方向是ltr(left to right)时;


        textAlign属性被设为end,且文档方向是rtl(right to left)时;


    文本对齐的设置代码如图:

在HTML5中设置文本对齐的代码

    在谷歌浏览器中预览的效果:

在HTML5中设置文本对齐的预览效果

    在HTML5中绘制简单的文字效果还是挺简单的,个人而言也比较好玩。希望大家有时间多练习练习代码,试着自己改变参数来实现不同的效果。了解更多精彩资讯请添加官方微信:pyyuanxing!谢谢大家的观看!祝大家:身体健康、生活愉快!

      友情链接

  1. 办公文秘
  2. 美术培训
  3. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142     微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

福建31选7开奖时间
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-06-25
  • 海南省习近平新时代中国特色社会主义思想学习研究中心(第二批)招标公告 2019-06-25
  • 网友给包头市委书记留言获回复 共计8条 2019-06-23
  • Jeep推3款车型搭载国VI发动机 新增多项配置 2019-06-21
  • 李易峰观影两度感动落泪 2019-06-21
  • 卓别林回顾展:在他身上,你看到了多少自己的影子? 2019-06-19
  • 从经济数据看民生获得感 2019-06-15
  • 中国智能手机在东南亚受追捧 2019-06-12
  • 房企发债频现中止 行业集中度料提升 ——凤凰网房产北京 2019-06-11
  • 路上安全  警钟长鸣:宝马SUV闯红灯  十字路口被面包车顶翻 2019-06-11
  • 紫光阁中共中央国家机关工作委员会 2019-06-09
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2019-06-09
  • 宝宝鼻子不通气怎么办 通气好方法都在这! 2019-06-04
  • 探寻深圳的创新基因(壮阔东方潮 奋进新时代·庆祝改革开放40年) 2019-05-28
  • 遏制互联网恶性竞争,条款是否越细越好 2019-05-28
  • 全国浙江大乐透走势图 广东26选5玩法说明 广东麻将规则 山西11选5台子 香港六合彩白小姐 福利彩票25选5中奖规则 江苏11选5对几个才中奖 p3直选百位杀号彩经网 pk10软件计划软件下载 欢迎光监国家唯一指定香港六合彩 上海时时乐开奖走势图 二肖中特精准老管家 辽宁快乐12开奖走势图 三肖中特期期准百度 新疆时时彩统计数据