如何用HTML5制作阴影文字?

HTML5除了兼容以往HTML版本的标签以外,还给我们提供了许多功能,比如绘画和文字处理。以往在PS中处理的图片和文字效果,用h5也能实现,下面就让我们一起来学习如何在h5中制作阴影文字,并在网页中输出。

操作方法

  • 01

    首先,先在<body>标签里面定义一张画布,并为画布设置高度、宽度和背景颜色如图1

  • 02

    把画布通过JS内部样式加载到网页中,代码如图2

  • 03

    运行程序,结果如图3

  • 04

    添加一个画笔(getContext),设置字体的大小和样式,并在坐标为X轴:250、Y轴:250,最大值为800的地方输出文字,代码如图4

  • 05

    运行程序,结果如图5

  • 06

    在X轴(shadowOffsetX)和Y轴(shadowOffsetX)上添加文字阴影部份,并为阴影文字设置背景颜色代码如图6

  • 07

    运行程序,结果如图7

  • 08

    为文字内容添加字体样式( fillstyle)边框(storestyle)颜色等,代码如图8

  • 09

    运行程序,结果如图9

(0)

相关推荐

  • 如何用PS制作投影文字

    PS是一款功能强大的图片编辑软件,有些新用户不知道如何用PS制作投影文字,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PS软件,新建空白画布,按照需求设置[宽度.高 ...

  • 如何制作阴影文字特效

    利用edius制作阴影文字特效,主要是创建字幕文件,通过对阴影效果的相关参数设置实现的,现在就分享设置的过程和截图,仅供参考. 操作方法 01 首先启动edius6,新建一文档,点击"在视频 ...

  • 如何用ps制作浮雕效果文字?

    咱们在生活中经常看见一些个性化的文字,而这些个性化文字总是很吸引人,在设计一张名片或者图片等等,都可以通过个性化文字来吸引群众的目光,那么今天小编就来跟大家讲讲如何用ps制作浮雕效果文字?一起来看下吧 ...

  • 如何用HTML5制作进度条方法教程

    进度条是指网络上文件.上传下载与浏览网页的可视化显示条.用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧 操作方法 01 先在<bod ...

  • 如何用微信制作动态文字表情?

    微信小程序隐藏的好功能:制作动态文字表情,快来跟小编一起了解下怎么用吧! 操作方法 01 打开微信--发现--小程序--搜索进入[动动文字] 02 进行授权 03 选择文字效果 04 输入文字,点击制 ...

  • 如何用PS制作动态文字?

    大家在网页上经常会看到那种会动的文字,相比较静态文字更显活泼生动,那么如何制作一个动态效果的文字呢?当然动态分为很多种,下面小编教给你最常见的两种动态效果,希望对大家有所帮助! 操作方法 01 第一种 ...

  • 如何用PS给鞋子制作阴影

    PS软件运用十分广泛,深受广大观众的喜欢,主要应用到图片处理.文字排版.图形设计.网页设计.建筑效果图的修饰等多个方面.所以今天小编想推荐的这篇文章是,如何用PS给鞋子制作阴影,希望大家喜欢小编文章哦 ...

  • 如何用ps制作文字投影

    ps软件的功能是很强大的,如果你还没有应用得到,说明你学习的还不够,需要继续学习.那么,如何用ps制作文字投影呢?下面就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件( ...

  • edius怎么给文字添加阴影? edius阴影文字特效的制作方法

    edius中的字幕想要添加阴影,该怎么添加呢?下面我们就来看看详细的教程. 1.首先启动edius6,新建一文档,点击“在视频轨道上创建字幕”,调出quick titler对话框. 2.从下面的列表中 ...