文章关键字 ‘canvas’

JS实现照片图片变成黑白线条线稿

2018年06月3日,星期日

本文演示如何使用JS实现照片图片变成黑白线稿图片效果,照片变成黑白简单线条有什么用呢?我能想到的就有5个用途,具体是什么,不妨进来看一看~

阅读全文…

二次元live2d看板娘效果中的web前端技术

2018年05月21日,星期一

想要在网页中插入看板娘效果,其实很简单,复制复制,粘贴粘贴代码就有了。但具体原理和技术实现是怎样的呢?本文就将介绍Live2D相关技术以及在web网页中的应用。有非常卡哇伊的demo,有必要的截图和源代码展示,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2018年05月4日,星期五

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

阅读全文…

小tips: 在canvas上实现元素图片镜像翻转动画效果

2018年03月18日,星期日

CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了。但是在canvas中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位……

阅读全文…

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

2018年02月24日,星期六

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

阅读全文…

解决canvas图片getImageData,toDataURL跨域问题

2018年02月10日,星期六

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

那有没有什么办法可以解决这个问题呢?

阅读全文…

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

2018年02月5日,星期一

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

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

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

阅读全文…

瞎折腾:把JS,CSS任意文本文件加密成一张图片

2017年12月24日,星期日

周末在家就是应该放松的,我的放松手段很简单,就是学习前端知识,写写文章,抽个时间去钓鱼,完美。

本文内容就是一个临时起意的折腾,一个对JS,CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片,以及如何解密等。

希望本文的内容对您的学习有所帮助。

阅读全文…

canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效

2017年12月14日,星期四

iPhone X手机默认的壁纸是一个非常绚丽多彩的效果,实际上我们使用代码也能实现类似的效果,并且颜色可以定制,甚至我们可以加一些动效,比如说它的颜色像水一样的不断的流动流淌,像云雾一样翻腾。

本文将通过实际案例的方式展示这种效果,同时介绍如何在项目中使用这个效果,以及它实现的原理。希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2017年12月9日,星期六

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

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

阅读全文…