尚武科技——负责任的企业公民

尚武十年[点击进入]

电话

电话咨询

pHONE CONSulTING

0311-87882018

QQ

在线咨询

ONliNE CONSulTING
百度商桥 在线客服
基础服务

基础服务

BaSIC SERVICES
业务
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
炫彩文字实现的方案有哪些呢?

  CSS3是实现渐变文字最简单的方案,而文字渐变和炫彩文字两者可能只是各行业的叫法不同而已,常见的炫彩文字常在大街上看到的显示屏上的五彩斑斓文字,那么炫彩文字该如何实现呢?
  CSS3方案
  抛开兼容性,CSS3很容易实现文字渐变效果,以下代码中background-image定义了文本盒子的背景填充样式,-webkit-background-clip:text用来让背景被裁剪成文字的前景样式,在通过-webkit-text-fill-color: transparent 是文本自身透明,呈现出被裁减的背景色
  .colorful-text {
  background-image:linear-gradient(90deg,color1,color2,...,colorN);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

石家庄网站建设


  水平渐变五色
  .colorful-text {
  background-image:linear-gradient(to right,red,aquamarine, green,yellow,blue); }
  垂直渐变五色 修改一下背景填充样式
  .colorful-text { background-image: linear-gradient(to bottom, red, aquamarine, green, yellow, blue); }
  垂直模式下得色彩容易丢失,问题出现在盒子的高度上,盒子高度是由文本撑起来的,而影响文本的只有行高,因此需要调整文本行高。
  Canvas方案
  Canvas同样会遇到垂直模式下的色彩丢失问题。这是文字本身所限制的。其实现思路:
  1、创建一个空的Canvas对象并且填充到父级容器中,此时的Canvas对象没有设置尺寸,使用的是浏览器默认的尺寸;
  2、通过用户输入,设置Canvas的字体(font-family, font-size, font-weight, font-style)等属性; 通过Ctx(canvas.getContext('2d'))原生的measureText方法,获取父级容器中可放置的最大字符串renderTexts;
  3、通过fontmetrics.js提供的度量方法获取renderTexts的文本度量属性;
  4、创建一个辅助Canvas,用来生成包括图像填充和各种渐变填充的辅助图案pattern;
  5、设置第一步创建的Canvas对象的宽高为度量后的文本宽高;
  6、设置Ctx的填充样式为辅助Canvas返回的pattern;
  7、通过Ctx的fillText方法填充renderTexts;
  以上就是石家庄网站建设小编介绍的炫彩文字实现的方案,希望能帮助大家更好的运用,如果想要网站定制的,欢迎来尚武可以咨询了解!我们有专业团队竭诚为您服务!





标签:石家庄网站建设
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved