文章关键字 ‘fillText’

纯前端实现可传图可字幕台词定制的GIF表情生成器

2018年05月4日,星期五

这两天晚上在家自己做了个可以传图,可以写台词的GIF表情图生成器。可以使用提供的模板,也可以自己传图制作,关键是纯前端实现的,这个有点厉害了,有兴趣可以进来看看。

阅读全文…

CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日,星期二

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

小tips: 使用JS检测用户是否安装某font-family字体

2018年02月24日,星期六

下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

canvas文本绘制自动换行、字间距、竖排等实现

2018年02月5日,星期一

和CSS相比,SVG以及canvas对文字排版的支持很弱。

在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。

但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?

阅读全文…

canvas getImageData与任意字符图形点、线动效实现

2017年12月9日,星期六

本文介绍如何借助canvas的getImageData方法实现动态文本字符以及图形图像相关的动效。

多种特效,多种实现方法展示。有JS注释详细为压缩demo,有GIF截屏演示,必要的源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…