css文字实例锦集
在画布上创建向上的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>
- font
字体 - fillStyle
填充颜色,填充图形、文字等 - fillRect()
绘制矩形 - shadowColor: 阴影颜色
- shadowOffsetX: x轴阴影方向偏移量
- shadowOffsetY: x轴阴影方向偏移量
- shadowBlue: 阴影模糊效果,值越大,模糊越厉害
- fillText: 填充文字
- strokeText: 绘制文字,没有填充
同理可以向下、左、右拉影。或者多个方向可以同时绘制,实现羽化的效果。
空心线条的文字
- 绘制线条宽度为3的白色文字
- 填充白色文字
<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);
- c.greateLinearGradient() :创建线性渐变对象,是一种颜色
- c.save() 保存当前环境状态(属性等)
- c.restore() 恢复状态
- c.scale(2,1) 缩放当前绘制,表示水平防线拉伸2倍,垂直方向不变,
css文字实例锦集的更多相关文章
- CSS 样式属性锦集
ul#nav > Li 只有一个大于号,是指应用了#nav这个ID的下一级元素的儿子辈Li 元素定义的内容符合这个CSS代码定义的样式,但是孙子辈Li元素定义的内容就不符合这个CSS代码样式了, ...
- iOS--碎片知识锦集
知识锦集day01 1.UIView的两个方法: sizeThatFits和 sizeToFit 官方文档上说: - (CGSize)sizeThatFits:(CGSize)size; // ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- ubuntu16.04安装cuda8.0试错锦集
ubuntu16.04安装cuda8.0试错锦集 参考文献: [http://www.jianshu.com/p/35c7fde85968] [http://blog.csdn.net/sinat_1 ...
- PTA|团体程序设计天梯赛-练习题目题解锦集(C/C++)(持续更新中……)
PTA|团体程序设计天梯赛-练习题目题解锦集(持续更新中) 实现语言:C/C++: 欢迎各位看官交流讨论.指导题解错误:或者分享更快的方法!! 题目链接:https://pintia.cn/ ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- CMD命令锦集
虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Windows 的各种版本都与其兼容,用户可以在Wi ...
随机推荐
- Flask - 运行APP
from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return 'Hello, ...
- python 中的生成器(generator)
生成器不会吧结果保存在一个系列里,而是保存生成器的状态,在每次进行迭代时返回一个值,直到遇到StopTteration异常结束 1.生成器语法: 生成器表达式:通列表解析语法,只不过把列表解析的[] ...
- input、raw_input区别,运算符,运算优先级,多变赋值方式
目录 1. Python2中的input.raw_input赋值方式和Python3中的input赋值方式的差别 2. 运算符 3. python运算符优先级 4. 格式化输出 5. 链式赋值 6. ...
- 2019年5月17日A股暴跌行情思考
2019年5月17日A股暴跌行情思考 原因:特朗普针对华为的禁商令,人民币对美元汇率大跌 盘面:平开,单边下跌,收盘80多股跌停 操作:下午2点加仓,满仓 总结: 本次操作太过激进. 局势不明朗时抄底 ...
- 【PAT甲级】1020 Tree Traversals (25 分)(树知二求一)
题意: 输入一个正整数N(N<=30),给出一棵二叉树的后序遍历和中序遍历,输出它的层次遍历. trick: 当30个点构成一条单链时,如代码开头处的数据,大约1e9左右的结点编号大小,故采用结 ...
- 树莓派4B踩坑指南 - (5)设置阿里云的源及解决apt提示依赖
解决树莓派apt升级/安装提示依赖问题: 注意!!buster是根据系统版本(cat /etc/os-release)来写的,如果是jessie或者stretch要改为buster.参考解决树莓派ap ...
- Centos7 nginx的目录结构与nginx主配置文件解析
一.nginx的目录结构 [root@node nginx_116]# ls client_body_temp conf fastcgi_temp html logs proxy_temp ...
- 多用块枚举,少用for循环
本文概要: 1.首先列举了四种可用于遍历的方式:标准的C语言for循环.Objective-C 1.0出现的NSEnumerator.Objective-C 1.0出现的for in快速遍历.块遍历. ...
- Linux设备驱动的软件架构思想
驱动相关:硬件之上的软件层,负责底层硬件与用户程序的交互 设备相关:底层设备的硬件操作 总线:匹配设备和驱动 设备驱动分层的思想:为同一类设备设计一个框架,而框架中的核心层则实现了该设备的一些 ...
- Linux --xrandr command
Source: https://www.x.org/archive/current/doc/man/man1/xrandr.1.xhtml https://blog.csdn.net/syh_486_ ...