但凡从事互联网的人基本都会写几行HTML，用过Word的人用Dreamweaver也能做出规整的页面，所以大部分人会很自然地认为“页面的开发没什么技术含量，很简单”。不仅普通人有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在用……还能有什么问题？瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢？网易邮箱前端技术中心也设立好几年了，似乎有着讨论不完的话题，也经常会有一些新的想法让大家为之一振。那么页面开发还有哪些要求，还要做些什么，这里面的水有多深，让我们舀舀看。 阅读全文 »

继续我们之前的，有关于HTML5的Canvas标签的使用教程，今天我们来讲解一下，如何使用Canvas绘制贝塞尔曲线。

要创建一个HTML5的画布——贝塞尔曲线，我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比，Bezier曲线定义有两个控制点，而不是一个，使您能够创建更复杂的曲线。 阅读全文 »

近几年，网络技术发展的速度十分惊人，前几年Flash还是网站互动和动画技术的主导，但现在Flash已经慢慢的被淘汰，并采取更多的与搜索引擎友好和强大的HTML5、CSS3和JavaScript技术。通过快速计算系统和高速上网，可轻松实现复杂但又流畅的动画效果的。 在这里，我们向你推荐7个超棒的HTML5设计的交互网站，很酷，很炫！ 阅读全文 »

HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师Sunshine珍兒同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。 阅读全文 »

Android操作系统进入中国第一天起，就不再姓Google了。想给Android“改姓”的厂商越来越多，华为、中兴、小米、联想等手机厂商，腾讯、盛大、百度、阿里巴巴四大互联网巨头，还有一些原本名不见经传的创业公司如乐蛙、魔趣、点心，都在忙着在Android系统基础上改动并植入自己的东西。 阅读全文 »

HTML5在移动设备上表现，相信已经不用我多说了，干掉了Flash之后，它已经坐上了移动应用程序的第一把交椅。几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持HTML5，而且据权威人士测试，这些支持HTML5的设备对Canvas标签的支持也是相当的好。

大家都知道Web2.0以来，应用程序的实现使用了大量Ajax，而Loading的小图标也有很多，甚至还有专门提供Loading图片的网站，所以我就想能不能让HTML5一并解决这个以前用gif文件才能解决的问题。出乎我意料的是，实现的过程非常简单，只用了不到一小时的时间我就用HTML5实验出了两个Loading效果，而且这样做出来的Loading图标是可定制的，既可以定制颜色，也可以定制大小等属性。 阅读全文 »

瀑布流布局的网站，是时下比较流行的一种网站布局方式，它能通过不停的JavaScript加载实现页面的展示功能。美丽说、蘑菇街、堆糖等网站就是瀑布流布局，淘宝也有部分页面中使用了瀑布流布局。淘宝的kissy框架加入了这种布局的插件，详细的你可以查看相关的API函数。在淘宝UED的博客中乔花也写了一篇有关于瀑布流布局的文章，有兴趣的朋友可以去看一下。

由于当下瀑布流网站的流行，我爱猫猫技术博客也做了一个简单的演示案例，下面就详细的说一下布局实现的实验流程： 阅读全文 »

现如今，HTML5的火爆程度已经无可想象了，他能完成的效果简直令你瞠目结舌。开发游戏，移动应用，程序交互，等等等等，甚至在移动终端，HTML5已经完全打败Flash，稳坐移动应用技术的第一把交椅。Canvas作为HTML5规范中最令人期待的元素，自然让很多的程序员堆满憧憬。Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个Canvas元素都有一个“上下文（context）”，在其中可以绘制任意图形。大多数高级浏览器都支持多个Canvas上下文，并通过不同的API提供图形绘制功能。

我爱猫猫技术博客坚信，Canvas能做到的事情有很多：绘制矩形，绘制渐变图形，绘制负杂的图形，甚至是绘制非常复杂的像素级图案。它能够改变我们习以为常的WEB模式，甚至改变我们的想象力。 阅读全文 »

讲解了那么多有关于Canvas标签应用的案例实验，发现自己忽略了一个非常重要的问题，那就是我一直没有说到Canvas的基础知识。虽然，Canvas不是一个非常复杂的标签，也没有那么多的属性，但是必要的基础知识和发展演变还是值得去说一说的。今天，我爱猫猫技术博客就为大家带来关于Canvas标签的基础知识。

以下是来自Operachina的译文：

HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5 Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个Canvas元素都有一个“上下文(context)” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个Canvas上下文，并通过不同的API提供图形绘制功能。 阅读全文 »

到目前为止，我们已经学习了利用坐标变换来实现的图形变换技术，那么，当利用坐标变换不能满足我们的需要时，该怎么办呢？我们可以利用矩阵变换技术来进行图形变换。接下来，我们将介绍更为复杂的矩阵变换技术。

矩阵是用来专门实现图形变形的，它与坐标一起配合使用，达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个矩阵进行修改，那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形，绘制出来的图形也不经过缩放变形处理，但是如果对这个变换矩阵进行修改，那么情况就不一样了。 阅读全文 »

在此之前，我们学习了很多有关于Canvas绘制图形的方法，有绘制矩形，绘制圆形，Canvas画线，绘制线性渐变图形，绘制径向渐变图形，绘制坐标变换图形等各种图形的绘制方法，今天我们要做的就是使用之前学习到的知识，做一个综合练习，使用Canvas绘制一个如下的图形： 阅读全文 »

熟悉Photoshop的朋友都不会对它的自由变换功能（快捷键是Ctrl+T）感到陌生，因为这个功能可以让你任意的变形一张图案，无限的发挥你的想象和创意。那么，当我们在使用Canvas绘制图形的时候，是否可以做到这一点呢？答案是肯定的。使用Canvas API的坐标轴变换处理功能，就能实现自由变化的效果。

我们知道，在Photoshop上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。在此之前的文章中，我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单位来进行绘制的。 阅读全文 »