在画布上创建向上的3D拉影文字

<canvas id="myCanvas" width="410" height="130"></canvas>
<script src="jquery.min.js"></script>
<script>
$(function () {
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
myContext.font = "40pt 宋体";
var height = 0;
myContext.fillStyle = "black";
myContext.fillRect(0, height, 410, 130); for (var i = 0; i < 10; i++) {
myContext.shadowColor = `rgba(255,255,255,${(10 - i) * 10})`;
// 特效文字一
myContext.shadowOffsetX = i+2;
myContext.shadowOffsetY = i+2;
// 特效文字二
// myContext.shadowOffsetX = -i+2;
// myContext.shadowOffsetY = -i+2;
myContext.shadowBlur = i*2;
myContext.fillStyle = "rgba(127,127,127,1)";
myContext.fillText("炫酷实例锦集", 40, 80, 300);
}
}); // onload
</script>

  1. font

    字体
  2. fillStyle

    填充颜色,填充图形、文字等
  3. fillRect()

    绘制矩形
  4. shadowColor: 阴影颜色
  5. shadowOffsetX: x轴阴影方向偏移量
  6. shadowOffsetY: x轴阴影方向偏移量
  7. shadowBlue: 阴影模糊效果,值越大,模糊越厉害
  8. fillText: 填充文字
  9. strokeText: 绘制文字,没有填充

同理可以向下、左、右拉影。或者多个方向可以同时绘制,实现羽化的效果。

空心线条的文字

  1. 绘制线条宽度为3的白色文字
  2. 填充白色文字
<canvas id="myCanvas" width="410" height="130"></canvas>
<script src="jquery.min.js"></script>
<script>
$(function () {
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
myContext.font = "40pt 宋体";
var height = 0;
myContext.fillStyle = "white";
myContext.fillRect(0, height, 410, 130); myContext.lineWidth = 3;
myContext.strokeStyle = 'green';
myContext.strokeText('炫酷实例锦集',40,80); myContext.fillStyle = 'white';
myContext.fillText('炫酷实例锦集',40,80);
}); // onload
</script>

半透明阴影文字

// shadow
myContext.shadowOffsetX = 2;
myContext.shadowOffsetY = 2;
myContext.shadowBlur = 2;
myContext.shadowColor = 'rgba(0,0,0,0.5)';
// 文字颜色线性渐变
var gradient = myContext.createLinearGradient(0,0,400,0);
gradient.addColorStop(0, 'red'); // 开始
gradient.addColorStop(1, 'green'); // 结束
myContext.fillStyle = gradient;
myContext.font = "40pt 宋体"; myContext.fillText('炫酷实例锦集',40,80);

  1. c.greateLinearGradient() :创建线性渐变对象,是一种颜色
  2. c.save() 保存当前环境状态(属性等)
  3. c.restore() 恢复状态
  4. c.scale(2,1) 缩放当前绘制,表示水平防线拉伸2倍,垂直方向不变,

css文字实例锦集的更多相关文章

  1. CSS 样式属性锦集

    ul#nav > Li 只有一个大于号,是指应用了#nav这个ID的下一级元素的儿子辈Li 元素定义的内容符合这个CSS代码定义的样式,但是孙子辈Li元素定义的内容就不符合这个CSS代码样式了, ...

  2. iOS--碎片知识锦集

    知识锦集day01 1.UIView的两个方法: sizeThatFits和 sizeToFit 官方文档上说: - (CGSize)sizeThatFits:(CGSize)size;     // ...

  3. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  4. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  5. ubuntu16.04安装cuda8.0试错锦集

    ubuntu16.04安装cuda8.0试错锦集 参考文献: [http://www.jianshu.com/p/35c7fde85968] [http://blog.csdn.net/sinat_1 ...

  6. PTA|团体程序设计天梯赛-练习题目题解锦集(C/C++)(持续更新中……)

    PTA|团体程序设计天梯赛-练习题目题解锦集(持续更新中) 实现语言:C/C++:      欢迎各位看官交流讨论.指导题解错误:或者分享更快的方法!! 题目链接:https://pintia.cn/ ...

  7. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  8. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  9. CMD命令锦集

    虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Windows 的各种版本都与其兼容,用户可以在Wi ...

随机推荐

  1. Flask - 运行APP

    from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return 'Hello, ...

  2. python 中的生成器(generator)

    生成器不会吧结果保存在一个系列里,而是保存生成器的状态,在每次进行迭代时返回一个值,直到遇到StopTteration异常结束 1.生成器语法: 生成器表达式:通列表解析语法,只不过把列表解析的[] ...

  3. input、raw_input区别,运算符,运算优先级,多变赋值方式

    目录 1. Python2中的input.raw_input赋值方式和Python3中的input赋值方式的差别 2. 运算符 3. python运算符优先级 4. 格式化输出 5. 链式赋值 6. ...

  4. 2019年5月17日A股暴跌行情思考

    2019年5月17日A股暴跌行情思考 原因:特朗普针对华为的禁商令,人民币对美元汇率大跌 盘面:平开,单边下跌,收盘80多股跌停 操作:下午2点加仓,满仓 总结: 本次操作太过激进. 局势不明朗时抄底 ...

  5. 【PAT甲级】1020 Tree Traversals (25 分)(树知二求一)

    题意: 输入一个正整数N(N<=30),给出一棵二叉树的后序遍历和中序遍历,输出它的层次遍历. trick: 当30个点构成一条单链时,如代码开头处的数据,大约1e9左右的结点编号大小,故采用结 ...

  6. 树莓派4B踩坑指南 - (5)设置阿里云的源及解决apt提示依赖

    解决树莓派apt升级/安装提示依赖问题: 注意!!buster是根据系统版本(cat /etc/os-release)来写的,如果是jessie或者stretch要改为buster.参考解决树莓派ap ...

  7. Centos7 nginx的目录结构与nginx主配置文件解析

    一.nginx的目录结构 [root@node nginx_116]# ls client_body_temp  conf  fastcgi_temp  html  logs  proxy_temp ...

  8. 多用块枚举,少用for循环

    本文概要: 1.首先列举了四种可用于遍历的方式:标准的C语言for循环.Objective-C 1.0出现的NSEnumerator.Objective-C 1.0出现的for in快速遍历.块遍历. ...

  9. Linux设备驱动的软件架构思想

    驱动相关:硬件之上的软件层,负责底层硬件与用户程序的交互 设备相关:底层设备的硬件操作 总线:匹配设备和驱动     设备驱动分层的思想:为同一类设备设计一个框架,而框架中的核心层则实现了该设备的一些 ...

  10. Linux --xrandr command

    Source: https://www.x.org/archive/current/doc/man/man1/xrandr.1.xhtml https://blog.csdn.net/syh_486_ ...