HTML5在线教程和技术博客

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁剪成我们想要的形状。
    clip-path支持多种方式,如基本的图形(多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()),也支持直接...

    阅读全文 收藏 评论 (1) 阅读 (12051) 2016-06-08 10:49:28  
  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行360°全景浏览就很难实现,并且粒子放大后会失真。今天我们使用WebGL来实现一个真正3D建模的下雨动画,所使用的技术可用于很多场景。[TD_Editor] data-height=300 d...

    阅读全文 收藏 评论 (0) 阅读 (12427) 2016-06-03 19:49:19  
  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在width下面,对于非IE浏览器会解析到width,而对于IE6来说,会用_width覆盖前面的width规则,从而达到针对IE6浏览器的兼容。对于IE其他版本(6~11),也存在同样的兼...

    阅读全文 收藏 评论 (0) 阅读 (9371) 2016-06-03 13:24:24  
  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具...

    阅读全文 收藏 评论 (0) 阅读 (17708) 2016-05-26 00:10:54  
  • WebGL入门教程1 - 3D绘图基础知识

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

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

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

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

    阅读全文 收藏 评论 (0) 阅读 (10207) 2016-05-23 15:41:17