HTML5在线教程和技术博客

  • 深入理解JS和CSS3动画性能问题和技术选择

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

    阅读全文 收藏 评论 (0) 阅读 (1568) 2016-11-13 12:38:23  
  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准,为什么HTML5代表了下一代网页技术。...

    阅读全文 收藏 评论 (0) 阅读 (1124) 2016-11-06 00:15:47  
  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体思路是:1. 使用HTML5的FileReader接口来读取用户上...

    阅读全文 收藏 评论 (1) 阅读 (462) 2016-11-04 22:44:27  
  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入html2canvas.js,建立一个简单的页面:然后调用如下的代码,上述DIV中包含的内容将被截屏并添加到页面下面:在线...

    阅读全文 收藏 评论 (0) 阅读 (747) 2016-11-04 21:00:32  
  • HTML5动画背后的数学2 - 仿生智能算法综述

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

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

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

    阅读全文 收藏 评论 (0) 阅读 (625) 2016-11-02 14:23:59  
  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),其软件架构如下:
    Cordova的工作原理是生成一个内置webview控件的容器app(这是个本地app),然后在webview中运行html/css/js的代码,如需调用本地服务如相...

    阅读全文 收藏 评论 (0) 阅读 (1217) 2016-10-17 23:09:00  
  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon.js是微软推动的,和微软的相关技术结合更好。本文对Babylon.js的使用做个简单的介绍。首先的首先,请确保你的浏览器支持WebGL(IE11+/Edge/Firefox 4+/Google Ch...

    阅读全文 收藏 评论 (1) 阅读 (1634) 2016-10-10 23:52:52  
  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG。本文介绍如何使用SVG结合CSS3来实现。在阅读本文之前,你最好先了解SVG的基本知识。...

    阅读全文 收藏 评论 (2) 阅读 (1864) 2016-10-07 18:57:13  
  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope>{>> >>>>displ...

    阅读全文 收藏 评论 (0) 阅读 (747) 2016-10-07 16:24:23