HTML5 SVG交互实例:转动的风车

在HTML里读取外部的一个SVG文件,这个外部SVG文件包含内置的JavaScript控制交互操作:用户点击风车的任何一个叶子,风车会转起来,如果再点一下叶片,就会停止转动。

风车是我用Adobe Illustrator,仿照随便百度来的一个位图画的。


Read More

Share

HTML5 SVG 初步学习

HTML5将XML和HTML的区别进一步缩小,表现在:它允许SVG(和MathML)标记直接在HTML文件中使用,而不需要命名空间的声明或者标签前缀。

这里演示的前两个例子来自《JavaScript权威指南·第六版》page 618.代码有些许优化。第三个例子根据基于XML的SVG应用指南介绍的方法,利用Illustrator CS6 自带的模板生成SVG,然后导入到HTML中。

初步感觉,SVG的基本绘图方法如patharcmove toline to等都与HTML5 canvas很相似。

Read More

Share

Hello, WebGL

这是一个WebGL Hello World。

关于博客引用自己的js代码:使用<script type="text/script" src="myjs.js"></script>,放在页面的正文里即可(最好放在<!-- more -->的后面)。但现在还不知道如何载入自定义的样式表——尤其某些样式只是在某些博文里做演示用的时候。也不清楚如何写模板,从而可以使用<style type="text/css"></style>来自定义一些样式。

值得注意的是,three.js 已经包含了对 requestAnimationFrame 的封装。因此,暂不必考虑其浏览器的差异性问题。

CSDN博客上也有极为详细的入门例子及代码解释,见 CSDN: WebGL库Three.js入门

Read More

Share

《 Smashing CSS 》读书笔记

Smashing CSS: Professional Techniques for Modern Layout(by Eric Meyer),我所读的中文版译名为《精彩绝伦的CSS》。我本以为Eric Meyer写了《CSS权威指南》后就没啥事儿了,原来他还一直在写书。跟Nicholas一样。

这本书的完稿时间是2010年8月,在中国的出版时间则是2012年7月。国内引进CSS方面的书籍的速度总是这样慢,Eric Meyer现在正在写《CSS: The Definitive Guide》的第四版,国内又不知道要什么时候才可以引进呢。

刚翻开没看多少页,就看到了今年10月份参加前端笔试时遇到的而且不知道该怎样回答的一个问题相关的内容。

Read More

Share

前端工程师自我修炼之道(不断更新)

录一下我为了成为Web前端工程师而读的书们,以及每个阶段的大概计划。也许最终我不能如愿以偿,但读书学技术总归是好的,结果起码是我终于有了一技之长。

Read More

Share

《书籍设计(第10辑)》简评

学无新旧也,无中西也,无有用无用也。凡立此名者,皆不学之徒,即学焉,而未尝知学者也。
——王国维《国学丛刊`序》

《书籍设计(第10辑)》这本书本身就是一件艺术品:从纸张选材,到字体/颜色方案,再排版布局设计,让我在图书馆看到它的第一眼就忍不住拿起来翻阅,然后立刻就借了出来回宿舍拜读。

书是语言的建筑,建筑是空间的语言

我推荐的文章有:

  • 书籍的灵性
  • 书籍:在知识森林中行走留下的记号
  • 装帧设计与品牌价值
  • 敬业以诚,敬学以新-对吕敬人的访谈与互动

Read More

Share

《CSS3实战:开发与设计》笔记

本文记录我在读《CSS3实战:开发与设计》时新掌握的知识点,并且不少技术我都用代码进行了测试,效果可以直接在本文看到。

Read More

Share

《编写可维护的JavaScript》笔记

“程序是写给人读的,只是偶尔让计算机执行一下。”

——Donald Knuth

关于本书:《编写可维护的JavaScript》

Read More

Share

HTML5地理位置获取:GeoLocation

在包含GPS硬件的设备上,通过GPS单元可以获取精确的位置信息。不过,大多数情况下,位置信息都是通过Web获取的。当浏览器提交Internet IP地址给一个Web服务器的时候,该服务器通常能够知道(基于ISP记录)该IP属于哪个城市(通常广告商会在服务器端这么做)。

Read More

Share

HTML5 audio 实验

下面是一段音频,来自《火影忍者》的插曲《夏日星》。文件大小为1.4MB,比较大。因为我的博客在写这篇博文之前只有300K多一点。

loop属性:当用户点击了播放,并且不点击暂停,则音频将循环播放。这个比autoplay属性友好很多。

Read More

Share