HTML5在线教程和技术博客

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数字营销等各个领域。在WebGL出现之前,用户必须安装第三方插件或本地应用程序才能利用设备硬件所拥有的强大的渲染功能,而使用WebGL,只需要浏览器就可以完成一切...

    阅读全文 收藏 评论 (6) 阅读 (19560) 2016-05-24 20:01:15  
  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。

    首先我们要了解,在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。那么所谓不完美圆形,实际可以通过一个不等...

    阅读全文 收藏 评论 (0) 阅读 (8949) 2016-05-23 15:41:17  
  • 如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合

    Part1中我们已经建立了绘制环境、背景和雨...

    阅读全文 收藏 评论 (0) 阅读 (11505) 2016-05-21 15:17:47  
  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过逼真的雨滴,但这个方法只适合用来模拟一些静态场景或少量雨滴动画,...

    阅读全文 收藏 评论 (1) 阅读 (10377) 2016-05-20 20:15:55  
  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方法,但很可能没有意识到性能上的差别,因为这涉及到浏览器渲染引擎的一些幕后的工作原理。使用top/left和margin来居中其中目前比较流行也比较容易理解的方法是使...

    阅读全文 收藏 评论 (0) 阅读 (10291) 2016-05-19 14:51:25  
  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。自适应布局(Adaptive Layout)自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,...

    阅读全文 收藏 评论 (0) 阅读 (10230) 2016-05-18 19:00:25  
  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery>Ribbles插件可以很容易的为背景图片引入水珠掉落水面时所产生的涟漪动画特效。首先引入jQuery脚本和jQuery Ribbles插件脚本:&script>src="/libs/jquery/jquery.min.js" &script>src="/libs/jquery/jquery.ripples.js" >>>>resolution:>512,>> >>>>dropRadius:>20,>> >>>>perturbance:>...

    阅读全文 收藏 评论 (0) 阅读 (10127) 2016-05-18 18:58:17  
  • Canvas实例教程:图像移动、大小调整和裁剪

    本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和裁剪图像,这些技术适用于图片编辑器、照片分享等应用场景。一般而言图像的剪裁会放在服务端进行,但是图片传送会消耗较多的流量。借助HTML5 Ca...

    阅读全文 收藏 评论 (1) 阅读 (12002) 2016-05-18 18:45:14  
  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN才能访问,为此可以先把该服务提供的数据以json文件的格式存储在本地服务器上。代码调用示例如下:d3.json("http://wow.techbrood.com/uploads/141102/propo...

    阅读全文 收藏 评论 (2) 阅读 (11534) 2016-05-18 18:39:23  
  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来简单介绍Three.js的基础知识。Three.js中的基本概念Three.js包含3个基本概念:场景(Scene)、相机(Camera)和渲染器(Renderer)。场景就是需要绘制的对象,相...

    阅读全文 收藏 评论 (0) 阅读 (10361) 2016-05-18 18:34:29