网上教学
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
绘制简单文字效果《HTML5系列教程22》

来源:新川教育 阅读数:3351
添加时间: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. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 联系方式
  7. site map

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

粤公网安备 44011302001949号
  • 在战火中诞生的党中央机关报(连载六) 2019-03-15
  • 上海浦东:高行同心圆 打造“指尖上的党建阵地” 2019-03-11
  • 郭树清:收益率超6%要打问号 让庞氏骗局无所遁形 2019-03-11
  • 有理讲理,不要诬蔑。 2018-12-03
  • 浙大科研团队15载攻克歼20等飞机装配系列难题 2018-12-03
  • “民主”韩非子叫“亲下以谋上”投机,中国是义主《国语》“立义治律万物皆作,分均天才万物熙熙。” 2018-12-03
  • 临汾市脑卒中急救溶栓地图发布 2018-08-22
  • 少1人战世界杯!克罗地亚锋霸确认被开除 2018-08-22
  • 莎拉-布莱曼新专辑《追梦人》发行 打造奇妙视听盛宴 2018-08-15
  • 《中国教育报》电子版 2018-08-15
  • 人民网评:别再让“600瓶白酒”恶化政治生态 2018-08-12
  • 游戏代练在网吧里卖淫秽视频 被警方逮个正着 2018-08-12
  • 尼玛嘉措:红军走过的地方 2018-07-30
  • 有事没事扎针灸?别这样养生 2018-07-30
  • 延安时期中共领袖红色家风建设研究 2018-07-16
  • 646| 752| 893| 136| 444| 788| 992| 18| 294| 860|