HTML5 Canvas绘制效率如何?

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或者线条),如果有阴影效果会慢很多,总的来说上万元素的绘制还是很轻松的

因为简单,做一些像素处理,2D绘制,小游戏啥的还是很方便的,国际上有javascript 1k作品大赛(http://js1k.com/),用1024字节的js代码,实现丰富的效果,基本上都用到canvas,所以在轻量小巧方面很有优势

附上SVG与Canvas的适用范围

canvas_or_SVG

HTML5之图形绘制技术(Canvas Vs SVG)

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

Canvas_Vs_SVG1

HTML5的当下与未来?

发表于 & 归档在 CSS, HTML, HTML5, JavaScript, Web.

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美

任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题
HTML5

JavaScript中的等价操作符

发表于 & 归档在 JavaScript, Web.

JavaScript中存在两种等价操作符:相等”==”和全等”===”,前者对不同类型(比如String与Object)也可作等价判断,后者则必须要求类型相同,此外JavaScript中的任何对象都可以判断是非,也就是转换成boolean基本类型,这些都是ECMAScript语言(包括JavaScript)的基础 JavaScript中的四种基本类型 number, string, boolean, object 等价判断首先会判断对象类型,对于全等操作符,类型不一时,直接返回false,而对于相等”==”操作符则会按特定的规则,转换成number, string, boolean这三种基本类型,而后做判断 相同类型间比较 全等操作符(strict equality operator) “===” 如果类型不一致,返回false number,如果相同值,返回true,NaN不等于任何值,包括他自己,NaN可通过全局方法,isNaN(…)判断 string,相同字符序列的返回true,有一种情况,相同的字符串使用Unicode标准可能有不同的编码方式,但遗憾的是,javascript只通过基本的字符比较,所有的字符串在比较之前,会先转换成“正常格式”。参考”String.localeCompare()”提供另一种比较字符串的方式 boolean,同为true或false,返回true 相同引用表示是同一个对象 如果两者都是null或者undefined,表示他们相同 这里需要注意一点,NaN是个怪物,它不等于任何对象,甚至不等于自己: [javascript]NaN !== 0; NaN !== NaN; NaN != 0; NaN != NaN;[/javascript] 相等操作符(Equality operator)”==” 相同类型之间的比较,有的人说等同于”===”,准确的说要除去null 和 undefined外,因为null == undefined ,但 null !== undefined ,余下的按全等的规则 [javascript]null == undefined[/javascript] 不同类型间比较 相等操作符(Equality operator)”==” javascript有四种类型对象,number, string, boolean, object,除去相同类型的比较外,不同类型之间会先通过类型转换,然后对二者比较,按排列组合存在六种情况:… Read more »

推荐一个数学工具网站

发表于 & 归档在 Web, 图形学, 数学.

推荐一个数学工具网站:数学工具http://zh.numberempire.com

导数,不定积分,方程求解,以前只能通过纸和笔,手工去运算,费劲费纸,结果还容易出错,后来发现这个网站,帮了我大忙,虽然有些高次的积分无法分解,反函数求解似乎也存在些问题,但基本的运算还是良好的

Screen Shot 2013-06-18 at 10.17.47 AM

JavaScript类继承与属性定义

发表于 & 归档在 HTML, JavaScript, Web.

Extjs的类继承——$.extend Extjs是比较早期的web企业组件,代表了面向对象编程思想在js中的实践,其中最基本的就是类的继承,通过对prototype和constructor的复制和设置实现,但实现代码并不是那么容易,看过extjs的extend代码就会明白其难度,没有相当js经验很难看懂,当年看这块儿费了不少精力,后来考虑到版权问题,以及代码简化的需要,自己实现相关功能,经历几番修改才得以稳定 下面是最简化的实现,以及测试例子,当然这个实现存在些问题,比如对于javascript 1.8中的get set不支持,需要自行改造 function extend(sb, sp) { var sbp = sb.prototype; var F = function() { }; F.prototype = sp.prototype; sb.prototype = new F(); sp.prototype.constructor = sp; for (var name in sbp) { sb.prototype[name] = sbp[name]; } } //test function A() { } A.prototype.name = "A"; function B() { } extend(B, A); var… Read more »