HTMLUnknownElement与HTML5自定义元素的故事

2018年03月20日 by 张 鑫旭 阅读 15339 次, 今日 15 次

我之前以为写一个规范以外的标签元素就是自定义元素,后来发现不是的。HTMLUnknownElement与自定义元素并不能直接相等,甚至可以说是陌路两人。

W3规范中,对自定义元素的定义是中间必须要有短横线(就是键盘上的减号)连接,并且浏览器也是这么认为的……

阅读全文…

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

2018年03月18日 by 张 鑫旭 阅读 16010 次, 今日 13 次

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

阅读全文…

CSS :default伪类选择器简介

2018年03月15日 by 张 鑫旭 阅读 15302 次, 今日 16 次

CSS3 :default伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。

阅读全文…

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

2018年02月27日 by 张 鑫旭 阅读 21964 次, 今日 18 次

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

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

阅读全文…

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

2018年02月24日 by 张 鑫旭 阅读 23834 次, 今日 24 次

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

阅读全文…

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

2018年02月10日 by 张 鑫旭 阅读 56793 次, 今日 56 次

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

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

阅读全文…

CORS ajax跨域请求php简单完整案例一则

2018年02月9日 by 张 鑫旭 阅读 27858 次, 今日 21 次

CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。

比较常见的应用之一就是Ajax跨域请求数据。

阅读全文…

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

2018年02月5日 by 张 鑫旭 阅读 47812 次, 今日 44 次

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

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

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

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日 by 张 鑫旭 阅读 20178 次, 今日 14 次

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

小tips: 纯CSS显示JS/HTML等源代码行数

2018年02月1日 by 张 鑫旭 阅读 17657 次, 今日 11 次

如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。

阅读全文…