广东 广州     国内第一流的专业网络营销培训、淘宝电商培训、电脑设计培训教程中心
网络营销选择培训班
新川教育-专业的网络营销培训机构
绘制简单文字效果《HTML5系列教程22》-广州番禺新川教育(原远行教育)。
   绘制简单文字效果《HTML5系列教程22》

来源:广州新川(原远行教育) 阅读数:939
添加时间:2017-5-8   类别:网页设计教程

绘制简单文字效果《HTML5系列教程22》

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

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


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

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

font函数的应用代码示例

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

font函数的详细描述

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

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

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

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

如何控制文本的颜色

    Canvas中有两种方法可用于改变文本的颜色,一种是通过fillstyle函数设置文本的填充颜色,另一种是通过createLinearGradient函数为文本填充渐变色。控制文本颜色的代码如下:

在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!谢谢大家的观看!祝大家:身体健康、生活愉快!

客服中心

点击这里给我发消息
黎老师

扫描添加微信号

广州新川教育微信号

展开客服

      友情链接

学校简介 |  教学优势   |   开班信息     |   学员作品  |   学校图片  |  师资介绍 |   资料下载   
工作推荐  |   就业精英   |  平面设计  |   室内设计  |  办公文秘 |   办公文秘教程 | 美术培训  | site map
地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话:020-84829690 84824066 咨询QQ:522961923  点击这里给我发消息
(4,5,6B,8,10,12,13,160,147路公共汽车在番禺中医院站或百德商业中心站下车即到)
(3,11,18,22,22B,51B,92,96,97,99,100,102,105,141,148,149,150,150B,303,309,310路公共汽车在交通大厦站下车,向番禺中医院方向走大约200米即到。)
1,20,20B,9路公共汽车到市桥大桥北站下车,向番禺中医院方向走100米左右即到。)
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

 新浪微博     新浪博客   天涯博客    和讯博客