用 Canvas 生成彩色三角形随机背景

思路是网上已经流行了一阵的多边风格(Low Poly),这次想用类似的样式做一个背景图,换个博客的背景,考虑三角形见棱见角,尖尖比较多,做背景的话效果不错。JS 和 Canvas 很好玩,就用这个了。

其实最后做出来的也不是多边风格,应该叫多堆叠彩色三角形,哈。

主要运用了 js 在页面的宽高的范围内,循环随机生成起点、二个顶点和颜色,然后用 canvas 画个有颜色带 Alpha 三角形。
然后利用 canvas 提供了 toDataURL 的接口,将 canvas 画布转化成可以当图片显示的 base64 编码。

熟肉代码如下:

继续阅读“用 Canvas 生成彩色三角形随机背景”

能保留住逝去的东西是件美好的事情

找原来的硬盘文件,翻到2005年2月28日做的一个鼠标指针,满满的都是泪水。

<img src="data:image/png;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAPDwAAAAAAAAAAAAAAAAAADwDwAAAAAAAAAAAAAAAAAA8ADwAAAAAAAAAAAAAAAAAPAADwAAAAAAAAAAAAAAAADwAAD///////8AAAAAAAAA8AAAD//////wAAAAAAAAAPAAAAD/////AAAAAAAAAADwAAAAD///8AAAAAAAAAAA8AAAAAD//wAAAAAAAAAAAPAAAAAAD/AAAAAAAAAAAADwAAAAAA8AAAAAAAAAAAAA8AAAAADwAAAAAAAAAAAAAPAAAAAPAAAAAAAAAAAAAADwAAAA8AAAAAAAAAAAAAAA8AAADwAAAAAAAAAAAAAAAPAAAPAAAAAAAAAAAAAAAADwAA8AAAAAAAAAAAAAAAAA8ADwAAAAAAAAAAAAAAAAAPAPAAAAAAAAAAAAAAAAAADw8AAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////f////z////8f////D////wf///8j////Mf///zgAB/88AA//PgAf/z8AP/8/gH//P8D//z/h//8/4///P8f//z+P//8/H///Pj///zx///84////Mf///yP///8H////D////x////8/////f////w==" alt="">

那会大家还都喜欢换个鼠标指针样式,换个桌面皮肤什么的。现在我看很多人都是默认的有一套,可能跟现在新东西太多,或者是认识的人都老了,不值得弄这些有的没的了。

话说那会还都是 IE 的天下。那个年代网页还盛行 table 布局,table 套 table,还不怎么用 css,div 只是作为内部调整文字使用,托拖拽拽也能做个页面,入门的话简单的很。

用 Canvas 画出浏览页面的进度

之前写过一个获取页面进度的代码

这次写的代码是将页面浏览的百分比展示到页面中,从0°到360°按照百分比显示。

用的是 html5 中的 canvas。

第一步:在页面上创建一个Canvas画布元素。
第二步:画一个圆形。
第三步:画一个扇形。
第四步:画一个小一点的圆形,这样就有一个带颜色的圆环。
第五步:圆中心写入进度文字。

继续阅读“用 Canvas 画出浏览页面的进度”

免费的中文字体

网上免费的英文字体很多,但是中文的就是凤毛麟角了,我的理解就是,外文字体很多都是26个字母加一些标点符号,一般都在十几到几百K,而中文制作起来费事费力,一般都是大几M甚至10多M,可见中国文化的博大精深。

既然是凤毛麟角,那说明还是有一点点可以免费用的,还有一些价格不高的字体,比如方正字库的2元起的字体 http://fangzhengziku.taobao.com

下面主要介绍免费或者开源的字体。

继续阅读“免费的中文字体”

JavaScript 实现网页滚动进度

依然是没什么卵用的代码段,也是看着玩的。

核心是两个监听代码,监听缩放滚动的事件。只对垂直滚动有效。

//获取网页可视页面的高度
var pageHeight = document.documentElement.clientHeight;
window.addEventListener('resize', function(){
pageHeight = document.documentElement.clientHeight;
}, false);

window.addEventListener("scroll", function() {
//获取滚动条据顶部的距离
var currentHeight = document.documentElement.scrollTop || document.body.scrollTop;
//获取整个网站页面的高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//将整体高度减去可视页面高度算出剩下内容的百分比,不这样的话,第一次滚动不是0%开始。输出的值只取整数
console.log(parseInt(100*currentHeight/(scrollHeight-pageHeight))+"%");
}, false);

一首找了很多年的歌曲

最近突然听到合集里边有一首熟悉的旋律《比爱更深的伤痛(사랑보다 깊은 상처)》,然后回忆起了当初找这首歌名的曲折和艰辛。

大学的时候那会正大规模的流行韩剧,从某论坛下载了一首韩国对唱的歌曲,很好听,男声非常浑厚,听着很有感觉,但是苦于不认识韩文,搜索条件也有限(还没有 soundhound 这类软件),多次搜索只能搜到 128k 或 64k 一样名字韩国男女深情对唱.mp3,别的信息一概没有。百度知道也问了,那会还缺少知乎现在这些大神们,所有就一直搁置了下去。

直到很多年之后上了班,无意中在网易云音乐听到朴孝信里边有这首歌,虽然不是他唱的但是既然里边有个韩文的歌名,那一切就好说了,虽然韩语依然一个字不认识,但是搜索技术已经不是当时的水平了,然后搜到一个记忆中的声音–任宰范(YIM JAE-BEUM、임재범)
1998年与朴正贤(Lena Park,박정현)合唱的《比爱更深的伤痛(사랑보다 깊은 상처)》
这才终于算是找到正根了,那会是2012年。
除了这首再推荐任宰范的几首歌
为了你
告解
烙印(追奴O.S.T)

用 Javascript 和 CSS3 来增加页面滚动的效果

整理代码看到里边还有一个 CSS3 写的彩虹圆圈。觉得要是让彩虹圆圈转动起来放到页面里边当个 loading 效果也不错。
当做起来的之后,突然觉得弄个跟随滚动条的效果更不错。
开始动手写。

如果想直接看成品代码的请直接看最后边第六步。

继续阅读“用 Javascript 和 CSS3 来增加页面滚动的效果”

用 prism 免插件实现代码高亮

博客一直没有用代码高亮,之前用过代码高亮的插件,但是用着总是不顺心,后来就直接加了个 code 的样式,用自带的 code 标签。
code 标签其实也算是凑合用,因为不能换两行,并且没有缩进。
终于找了个挺不错的代码高亮 js 工具,不用插件,只需要引入一个 css 和 js。

下边有请主角 prismjs

继续阅读“用 prism 免插件实现代码高亮”
冀ICP备17005573号-1