言

在之前的一篇文章《用HTML5的canvas来画一个梦幻星空，来学习一下吧》中，我们使用HTML5的canvas画出了一个梦幻星空的效果。今天这篇文章我们继续使用canvas来画出几个简单的小球运动效果，一起来看看吧。

本文源码已经开源到Github上，感兴趣的可以自取，Github地址如下。

https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas

HTML5

小球直线运动

首先我们来看看小球直线运动的效果图，如下所示。

运动效果图

然后我们来分析下，这个效果是如何实现的。

1. 首先设置画布宽高等信息，然后利用canvas画出一个小球，设定初始状态，包括颜色，半径，初始位置等信息。

2. 设定一个定时器，每次动态更新小球的位置，由于定时器时间比较短，肉眼观察下，相当于小球运动的效果。

通过上述的分析，我们得出以下的代码。

对于canvas页面的HTML代码永远都只包含一个元素。

HTML代码

接下来是主要的Javascript代码，首先是画布，小球初始信息的设置，并设置定时器函数。

小球初始信息

然后是执行的定时器函数，动态更新小球的位置，当小球运动出画布范围后，重新从起点位置开始运动。

定时器函数

就这两段代码，就可以实现出以上的小球匀速直线运动的效果。

小球圆周运动

首先，我们来看看小球匀速圆周运动的效果图，如下所示。

运动效果图

接下来我们同样来分析下这个效果是如何实现的。

1. 首先画出两个小圆，一个是蓝色，一个是红色，设定初始信息和上述例子一样。

2. 设定定时器，每次清除画布后，重新渲染，并且更新小蓝球的位置，由于是圆周运动，并不会出现上述例子中移出画布的情况。

通过上面的描述，我们得出以下代码，HTML代码一样，这里不再给出。

首先是原始小蓝球的绘制，并设置定时器。

小蓝球的绘制

然后是小红球的绘制。

小红球的绘制

最后是定时器函数的实现，在该函数中会让小蓝球旋转一定的角度。

定时器函数

至此，小球的匀速圆周运动效果代码就完全实现了。

总结

今天这篇文章主要是利用HTML5的canvas实现了一些简单的小球运动效果，你学会了吗？

者：Darrell Etherington

根据Bernstein Research公司分析师Toni Sacconaghi Jr的观点，在HTML5的影响下，2015年苹果营业利润增长可能会遭受30%的损失。Forrester Research公司也曾指出，HTML5的出现还将影响苹果通过原生应用中收获的利润。但从以下两个原因可以看出，业内人士不应该低估iOS原生应用的长远吸引力：

1.原生应用能够突破其局限性

人们之所以认为HTML5将取代iPad和iPhone设备中的原生应用是因为它的网络技术正在赶超iOS软件的功能。虽然这是事实，但是HTML5永远也不可能与原生应用相提并论，应为苹果始终掌握着主要控制权，它可以决定哪些第三方应用软件可以在iOS设备上运行。iOS每一次重大更新都能给开发者带来新的API，而每一代新的硬件也都提供了新的网络连接选项，收音机以及其它硬件功能。举个例子来说，iOS 5便推出了1500款新型API，包括iCloud Storage，Newsstand以及Twitter。

只有苹果能够决定它的软件可以做什么或不能做什么，以及何种硬件可以与之兼容；但是因为HTML5是基于所有浏览器而设置的，所以要求更多的技术妥协。同时，HTML5如果要使用iOS硬件的所用功能也拥有许多局限因素，尽管苹果已经采取了一些改善措施，例如允许Safari使用更多的本地设备内存以及地理定位服务。虽然如此看来好像是HTML5正在迎头赶上本机应用，但是事实上它却永远不可能超越它们，因为苹果的移动技术还在不断进化，并且通过iOS SDK给原生应用开发者提供更多的API选择。

2.原生应用才刚超越移动网页

在智能手机和平板电脑设备中，手机应用刚刚才开始赶超移动网页，其人气正处于高涨阶段。应用商店的出现更是助长了这种趋势，目前尚无迹象表明这种趋势会放缓或者扭转，虽然Vudu（注：一种新型电视节目服务），亚马逊以及《金融时报》等公司最近都绕开苹果App Store，创建了HTML5网页应用。

显然，很多公司宁愿选择HTML5而不是苹果的原生应用是因为，基于网页的产品让他们绕过苹果这个中间商，避开苹果营收抽成，直接获取更大的利润，并且能够针对多个平台一次性开发产品。但是从用户体验的角度来看，绝大多数用户可能并不会支持应用大规模向HTML5领域迁移。虽然市场上将会有越来越多HTML5产品，但是原生应用的光芒也不会轻易被掩盖，因为它有稳定的离线访问，特定的界面，可自由访问特定硬件和软件等功能。

我认为在今后几年里，苹果将继续从原生应用中赚取更多利润，HTML5无法对此造成严重影响。

注：原文发表于2011年9月13日，所涉事件和数据均以当时为准。

IT时报 孙妍

1999年，他用HTML5写了一个棋牌类游戏平台，令他3个月内赚了300万。之后，他又开发了国内三大休闲游戏平台之一的可乐吧，他就是Layabox的CEO谢成鸿。Layabox是一家为Flash程序员开发HTML5提供技术解决方案的公司，简单地说，借助Layabox的解决方案，程序员可以直接在Flash环境下开发大型的重度HTML5游戏。

2010年，赵霏开始第二次创业——磊友科技，从手游行业转向HTML5，就是因为乔布斯的一句话：“移动时代是低功耗设备、触摸屏界和开放网络标准的时代，Flash已经落伍。”在苹果、Facebook等科技巨头们纷纷加入HTML5行业之时，赵霏和他的团队开始着力开发HTML5的解析引擎和手机浏览器，同时也被李开复相中，成为创新工场孵化的第一个HTML5项目。

然而，到了2012年，HTML5从技术支持到产品都不见成效，自身的标准制定也分成了两派，Facebook创始人马克·扎克伯格更公开宣布放弃HTML5。这一年，赵霏和他的团队把重心都放在了开发大型手机HTML5网页游戏上。

2013年，磊友科技陆续推出的5款HTML5游戏都没有获得成功，团队不断有人出走，一直笼罩在“散伙”的阴影下。有的转去做代计费的，有的转去做iOS和Android开发，有的甚至离开了这个行业。几近凋蔽，团队只剩下了两三个“元老”，但是赵霏仍旧没有放弃HTML5。

HTML5就这样一直在冰火两重天里游走，谁也没有想到，就在2014年8月，一个HTML5的小游戏《围住神经猫》在微信朋友圈一夜爆红，而南京泥巴怪公司其实只是为了拉点用户，花了一天功夫就将它做了出来。自此以后，HTML5的“卡片”广告、邀请函、互动游戏在朋友圈里盛传，不管是营销公司、游戏公司还是风投，都跟风研究起HTML5。

风口大型游戏借HTML5颠覆App？

近期，几家游戏引擎公司、数据公司和分发平台都纷纷发声，预测HTML5游戏将在今年爆发。然而就轻量的HTML5游戏来说，继《围住神经猫》之后，就没有再出现有一定影响力的游戏。而且，《围住神经猫》一直为人诟病的就是，生命周期短，没法将流量变现，而这两点恰恰是游戏的命脉。

在谢成鸿看来，HTML5游戏的前景在于大型游戏。

但问题就来了，大型的HTML5游戏需要有高性能的浏览器适配，如若不然，卡顿、发热就会成为硬伤，目前看来还没有浏览器可以顺畅地跑大型游戏。于是，就衍生出了做HTML5加速器的公司，Cocos、白鹭引擎和谢成鸿的Layabox俨然成三足鼎立之势。

“Cocos和我们主要针对较大的游戏开发者，白鹭引擎主要面向小开发者，在HTML5游戏潜在客户里，我们已经占有一半左右。”谢成鸿说道。据悉，国内20家主流页游厂商中，已经有三分之一与Layabox合作。

“大型HTML5游戏在普通浏览器上跑不动，这是最大的问题。”他说。于是，Layabox就做出了一套针对HTML5生态链的整体解决方案。

目前，Layabox有三个主要业务方向，在开发者端，基于Flash的开发环境较为成熟，所以Layabox为开发者提供在Flash环境下开发大型HTML5游戏的解决方案，夸张一点的理解就是一键转换；在浏览器适配问题上，Layabox开发了自家的加速器，可以让微信这样的流量平台也可以跑得动大型页游。

几年前，赵霏和他的团队也都认为，PC上既然经历了从端游到页游的趋势，说明用户有使用场景上的需求，那么在移动设备上，应该也会有从App向HTML5转移的倾向。在解决卡顿和发热的前提下，毕竟HTML5游戏不用下载安装，比起App更加方便，而且营销成本将近比App要低10倍。

难道HTML5真的能颠覆App？经过几年的试水，赵霏开始不看好大型HTML5游戏在移动端的前景。因为他发现，用户在手机上玩大型游戏时，还是会倾向于App。“用户体验的时间和场景都是不对的，举个简单的例子，当你想再玩一次HTML5网页游戏时，会发现很难找到入口，但App至少在桌面上有个图标。”他对《IT时报》记者说道。

模式流向变现还得傍上O2O

在海底捞，最壮观的场景就是排队等食，虽然已经使出了免费美甲、免费擦鞋等招数，但仍旧没有缓解食客因为排队而流失的情况。

这倒是激发了赵霏的灵感，于是磊友科技就为海底捞设计了一个HTML5的游戏营销方案。食客在排队时，可以通过扫描二维码玩一个小游戏，如果能荣登排行榜，就可以领取海底捞的代金券。

今年1月份，这个HTML5游戏上线，在北京10家海底捞分店进行试玩，结果显示，20%～30%的食客愿意参与进来，达到了30万人次的访问。

从海底捞的成功案例开始，宝洁、可口可乐、旺旺等公司都踏进了赵霏的门槛，目前已有将近100家企业让他们定制游戏。一般这些小游戏都会被植入商家的微信公众号内，玩游戏并分享至朋友圈来赢取代金券，又是用积分抽奖等方式帮电信运营商消耗积分。

那么，怎么解决用户留存的问题呢？“HTML5的游戏营销最重要的是考虑使用场景，比起横幅、弹窗等互动性不强的移动营销模式，效果更好。”赵霏说。

一般来说，在外面消费时，HTML5就显示出了不用下载安装的优势。到酒店先连Wi-Fi是一个常见的使用场景，客人可以直接扫二维码自动关注酒店微信号，同时取得连接Wi-Fi的权限，然后就能点开公众号里的菜单，玩游戏赢取附近餐厅的代金券。

赵霏认为，HTML5小游戏如何能使流量变现，开发团队应该换个思路，“之前我们做大型HTML5游戏时，考虑的是怎么从用户那赚钱，通关、买装备等。现在从2C到2B，考虑的是怎么让企业买单。社交性比较强，能使线上线下联动的游戏更有市场。”

结合了HTML5和O2O两个热点之后，对赵霏来说，上门找融资已经不是一件难事了。他透露，今年六七月份，磊友科技就有B轮融资的计划。

缺口工具和人才

赵霏曾谈道：“研发完全自主内核的浏览器引擎的难度不亚于一个操作系统。”最后，由于很难追赶苹果Safari浏览器迭代速度等壁垒，他和团队就放弃了HTML5浏览器引擎的商用，现在只用于团队内部开发。

谢成鸿略带自信地谈道，“HTML5开发最大的问题就是工具的缺乏，因为它没有像Flash一样，有可控的开发语言，有成熟的开发环境。我们做Flash转HTML5的解决方案就是想解决这些问题。”

HTML5缺乏成熟开发环境的表现之一，就是开发人才的缺失。上个月，招聘网站拉勾网发布报告显示，HTML5开发成为了“职位多，人才少”的热门岗位。就目前招聘的开发者市场水平来看，拥有1年左右工作经验的HTML5程序员，月薪基本在2～3万，然而，拥有4到5年工作经验的AS程序员（基于Flash开发），月薪却只有1.5万。

“前盛大游戏CEO凌海的团队，从去年到现在，竟然招不到一个专精于HTML5的程序员。这些天，他团队的程序员就在我们这儿学习HTML5开发技术。”谢成鸿说道。