HTML5在线教程和技术博客

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controller(控制器),React只有view(视图)层。而Angular2使用TypeScript重建了整个框架,好处是可以利用TypeScript的增强语法。相对而言Angular是一个重量级的开发框...

    阅读全文 收藏 评论 (0) 阅读 (6713) 2016-12-12 12:58:22  
  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是...

    阅读全文 收藏 评论 (0) 阅读 (3271) 2016-12-08 16:14:54  
  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:flex-flow: &flex-direction< || &flex-wrap{>> >>>>display:>flex;>> }>> .flex-container.first>{>> >>>>flex-flow...

    阅读全文 收藏 评论 (0) 阅读 (4895) 2016-12-08 16:11:30  
  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了浏览器,优化了内存消耗、DOM操作和默认利用了RAF,所以要比jQuery动画性能更好3. CSS3可能会引起浏览器主线程和复合器线程之间过度数据交互,从而导致性能下降4...

    阅读全文 收藏 评论 (0) 阅读 (12657) 2016-11-13 12:38:23  
  • HTML5动画背后的数学2 - 仿生智能算法综述

    本文是前文粒子群仿生算法的续,转发一篇对主流仿生智能算法的一个综述。相关实例...

    阅读全文 收藏 评论 (0) 阅读 (3872) 2016-11-02 14:53:26  
  • HTML5动画背后的数学 - 粒子群仿生算法简介

    本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除了HTML5 Canvas绘制技巧外,主要是背后的数学算法。本文转发一篇该动画背景算法的简介。1. 引言粒子群优化算法(PS...

    阅读全文 收藏 评论 (0) 阅读 (4247) 2016-11-02 14:23:59  
  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检测uniforms的使用情况。For a recent consulting project I was attempting to render some fairly complex skeletal animations in WebGL on Firefox and Chrom...

    阅读全文 收藏 评论 (0) 阅读 (5806) 2016-09-02 23:36:38  
  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。本文的在线演示结果和代码请点击这里:

    阅读全文 收藏 评论 (0) 阅读 (43518) 2016-08-12 09:14:18  
  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数,定义如何将纹理图像的像素点映射到模型网孔上。这可以分为两步来完成:定义UV坐标UV Mapping指将Bitmap的像素映射到Mesh上的顶点。UV坐标定义...

    阅读全文 收藏 评论 (0) 阅读 (8885) 2016-07-15 22:41:57