下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。
解决canvas图片getImageData,toDataURL跨域问题
2018年02月10日 by 阅读 120306 次, 今日 46 次对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。
那有没有什么办法可以解决这个问题呢?
CORS ajax跨域请求php简单完整案例一则
2018年02月9日 by 阅读 46231 次, 今日 28 次CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。
比较常见的应用之一就是Ajax跨域请求数据。
canvas文本绘制自动换行、字间距、竖排等实现
2018年02月5日 by 阅读 97919 次, 今日 43 次和CSS相比,SVG以及canvas对文字排版的支持很弱。
在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。
但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?
小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现
2018年02月2日 by 阅读 34380 次, 今日 29 次对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。
尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。
那么该如何实现呢?
小tips: 纯CSS显示JS/HTML等源代码行数
2018年02月1日 by 阅读 30153 次, 今日 26 次如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。
CSS改变插入光标颜色caret-color简介及其它变色方法
2018年01月28日 by 阅读 60439 次, 今日 38 次有这样一个需求,改变输入光标的颜色,同时不改变输入框文字原本的颜色,在以前,如果产品经理提这样的需求,多半都会被开发一板子打过去。而如今,实际上已经有了天然针对此需求的属性caret-color。同时本文还会介绍其他一些改变光标颜色不改变文字颜色方法。希望本文能够对你的学习有所帮助。
详细了解CSS :focus-within伪类及其交互应用
2018年01月21日 by 阅读 41851 次, 今日 35 次:focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先<form>
元素可以也有状态变化。
但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先<form>
元素玩过家家这么简单。
理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制…
借助HTML5 details,summary无JS实现各种交互效果
2018年01月15日 by 阅读 60387 次, 今日 41 次HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。
瞎折腾:把JS,CSS任意文本文件加密成一张图片
2017年12月24日 by 阅读 51101 次, 今日 37 次周末在家就是应该放松的,我的放松手段很简单,就是学习前端知识,写写文章,抽个时间去钓鱼,完美。
本文内容就是一个临时起意的折腾,一个对JS,CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片,以及如何解密等。
希望本文的内容对您的学习有所帮助。