言

在之前的一篇文章《用HTML5的canvas來畫一個夢幻星空，來學(xué)習(xí)一下吧》中，我們使用HTML5的canvas畫出了一個夢幻星空的效果。今天這篇文章我們繼續(xù)使用canvas來畫出幾個簡單的小球運動效果，一起來看看吧。

本文源碼已經(jīng)開源到Github上，感興趣的可以自取，Github地址如下。

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

HTML5

小球直線運動

首先我們來看看小球直線運動的效果圖，如下所示。

運動效果圖

然后我們來分析下，這個效果是如何實現(xiàn)的。

1. 首先設(shè)置畫布寬高等信息，然后利用canvas畫出一個小球，設(shè)定初始狀態(tài)，包括顏色，半徑，初始位置等信息。

2. 設(shè)定一個定時器，每次動態(tài)更新小球的位置，由于定時器時間比較短，肉眼觀察下，相當(dāng)于小球運動的效果。

通過上述的分析，我們得出以下的代碼。

對于canvas頁面的HTML代碼永遠都只包含一個元素。

HTML代碼

接下來是主要的Javascript代碼，首先是畫布，小球初始信息的設(shè)置，并設(shè)置定時器函數(shù)。

小球初始信息

然后是執(zhí)行的定時器函數(shù)，動態(tài)更新小球的位置，當(dāng)小球運動出畫布范圍后，重新從起點位置開始運動。

定時器函數(shù)

就這兩段代碼，就可以實現(xiàn)出以上的小球勻速直線運動的效果。

小球圓周運動

首先，我們來看看小球勻速圓周運動的效果圖，如下所示。

運動效果圖

接下來我們同樣來分析下這個效果是如何實現(xiàn)的。

1. 首先畫出兩個小圓，一個是藍色，一個是紅色，設(shè)定初始信息和上述例子一樣。

2. 設(shè)定定時器，每次清除畫布后，重新渲染，并且更新小藍球的位置，由于是圓周運動，并不會出現(xiàn)上述例子中移出畫布的情況。

通過上面的描述，我們得出以下代碼，HTML代碼一樣，這里不再給出。

首先是原始小藍球的繪制，并設(shè)置定時器。

小藍球的繪制

然后是小紅球的繪制。

小紅球的繪制

最后是定時器函數(shù)的實現(xiàn)，在該函數(shù)中會讓小藍球旋轉(zhuǎn)一定的角度。

定時器函數(shù)

至此，小球的勻速圓周運動效果代碼就完全實現(xiàn)了。

總結(jié)

今天這篇文章主要是利用HTML5的canvas實現(xiàn)了一些簡單的小球運動效果，你學(xué)會了嗎？

者：Darrell Etherington

根據(jù)Bernstein Research公司分析師Toni Sacconaghi Jr的觀點，在HTML5的影響下，2015年蘋果營業(yè)利潤增長可能會遭受30%的損失。Forrester Research公司也曾指出，HTML5的出現(xiàn)還將影響蘋果通過原生應(yīng)用中收獲的利潤。但從以下兩個原因可以看出，業(yè)內(nèi)人士不應(yīng)該低估iOS原生應(yīng)用的長遠吸引力：

1.原生應(yīng)用能夠突破其局限性

人們之所以認(rèn)為HTML5將取代iPad和iPhone設(shè)備中的原生應(yīng)用是因為它的網(wǎng)絡(luò)技術(shù)正在趕超iOS軟件的功能。雖然這是事實，但是HTML5永遠也不可能與原生應(yīng)用相提并論，應(yīng)為蘋果始終掌握著主要控制權(quán)，它可以決定哪些第三方應(yīng)用軟件可以在iOS設(shè)備上運行。iOS每一次重大更新都能給開發(fā)者帶來新的API，而每一代新的硬件也都提供了新的網(wǎng)絡(luò)連接選項，收音機以及其它硬件功能。舉個例子來說，iOS 5便推出了1500款新型API，包括iCloud Storage，Newsstand以及Twitter。

只有蘋果能夠決定它的軟件可以做什么或不能做什么，以及何種硬件可以與之兼容；但是因為HTML5是基于所有瀏覽器而設(shè)置的，所以要求更多的技術(shù)妥協(xié)。同時，HTML5如果要使用iOS硬件的所用功能也擁有許多局限因素，盡管蘋果已經(jīng)采取了一些改善措施，例如允許Safari使用更多的本地設(shè)備內(nèi)存以及地理定位服務(wù)。雖然如此看來好像是HTML5正在迎頭趕上本機應(yīng)用，但是事實上它卻永遠不可能超越它們，因為蘋果的移動技術(shù)還在不斷進化，并且通過iOS SDK給原生應(yīng)用開發(fā)者提供更多的API選擇。

2.原生應(yīng)用才剛超越移動網(wǎng)頁

在智能手機和平板電腦設(shè)備中，手機應(yīng)用剛剛才開始趕超移動網(wǎng)頁，其人氣正處于高漲階段。應(yīng)用商店的出現(xiàn)更是助長了這種趨勢，目前尚無跡象表明這種趨勢會放緩或者扭轉(zhuǎn)，雖然Vudu（注：一種新型電視節(jié)目服務(wù)），亞馬遜以及《金融時報》等公司最近都繞開蘋果App Store，創(chuàng)建了HTML5網(wǎng)頁應(yīng)用。

顯然，很多公司寧愿選擇HTML5而不是蘋果的原生應(yīng)用是因為，基于網(wǎng)頁的產(chǎn)品讓他們繞過蘋果這個中間商，避開蘋果營收抽成，直接獲取更大的利潤，并且能夠針對多個平臺一次性開發(fā)產(chǎn)品。但是從用戶體驗的角度來看，絕大多數(shù)用戶可能并不會支持應(yīng)用大規(guī)模向HTML5領(lǐng)域遷移。雖然市場上將會有越來越多HTML5產(chǎn)品，但是原生應(yīng)用的光芒也不會輕易被掩蓋，因為它有穩(wěn)定的離線訪問，特定的界面，可自由訪問特定硬件和軟件等功能。

我認(rèn)為在今后幾年里，蘋果將繼續(xù)從原生應(yīng)用中賺取更多利潤，HTML5無法對此造成嚴(yán)重影響。

注：原文發(fā)表于2011年9月13日，所涉事件和數(shù)據(jù)均以當(dāng)時為準(zhǔn)。

IT時報 孫妍

1999年，他用HTML5寫了一個棋牌類游戲平臺，令他3個月內(nèi)賺了300萬。之后，他又開發(fā)了國內(nèi)三大休閑游戲平臺之一的可樂吧，他就是Layabox的CEO謝成鴻。Layabox是一家為Flash程序員開發(fā)HTML5提供技術(shù)解決方案的公司，簡單地說，借助Layabox的解決方案，程序員可以直接在Flash環(huán)境下開發(fā)大型的重度HTML5游戲。

2010年，趙霏開始第二次創(chuàng)業(yè)——磊友科技，從手游行業(yè)轉(zhuǎn)向HTML5，就是因為喬布斯的一句話：“移動時代是低功耗設(shè)備、觸摸屏界和開放網(wǎng)絡(luò)標(biāo)準(zhǔn)的時代，F(xiàn)lash已經(jīng)落伍?！痹谔O果、Facebook等科技巨頭們紛紛加入HTML5行業(yè)之時，趙霏和他的團隊開始著力開發(fā)HTML5的解析引擎和手機瀏覽器，同時也被李開復(fù)相中，成為創(chuàng)新工場孵化的第一個HTML5項目。

然而，到了2012年，HTML5從技術(shù)支持到產(chǎn)品都不見成效，自身的標(biāo)準(zhǔn)制定也分成了兩派，F(xiàn)acebook創(chuàng)始人馬克·扎克伯格更公開宣布放棄HTML5。這一年，趙霏和他的團隊把重心都放在了開發(fā)大型手機HTML5網(wǎng)頁游戲上。

2013年，磊友科技陸續(xù)推出的5款HTML5游戲都沒有獲得成功，團隊不斷有人出走，一直籠罩在“散伙”的陰影下。有的轉(zhuǎn)去做代計費的，有的轉(zhuǎn)去做iOS和Android開發(fā)，有的甚至離開了這個行業(yè)。幾近凋蔽，團隊只剩下了兩三個“元老”，但是趙霏仍舊沒有放棄HTML5。

HTML5就這樣一直在冰火兩重天里游走，誰也沒有想到，就在2014年8月，一個HTML5的小游戲《圍住神經(jīng)貓》在微信朋友圈一夜爆紅，而南京泥巴怪公司其實只是為了拉點用戶，花了一天功夫就將它做了出來。自此以后，HTML5的“卡片”廣告、邀請函、互動游戲在朋友圈里盛傳，不管是營銷公司、游戲公司還是風(fēng)投，都跟風(fēng)研究起HTML5。

風(fēng)口大型游戲借HTML5顛覆App？

近期，幾家游戲引擎公司、數(shù)據(jù)公司和分發(fā)平臺都紛紛發(fā)聲，預(yù)測HTML5游戲?qū)⒃诮衲瓯l(fā)。然而就輕量的HTML5游戲來說，繼《圍住神經(jīng)貓》之后，就沒有再出現(xiàn)有一定影響力的游戲。而且，《圍住神經(jīng)貓》一直為人詬病的就是，生命周期短，沒法將流量變現(xiàn)，而這兩點恰恰是游戲的命脈。

在謝成鴻看來，HTML5游戲的前景在于大型游戲。

但問題就來了，大型的HTML5游戲需要有高性能的瀏覽器適配，如若不然，卡頓、發(fā)熱就會成為硬傷，目前看來還沒有瀏覽器可以順暢地跑大型游戲。于是，就衍生出了做HTML5加速器的公司，Cocos、白鷺引擎和謝成鴻的Layabox儼然成三足鼎立之勢。

“Cocos和我們主要針對較大的游戲開發(fā)者，白鷺引擎主要面向小開發(fā)者，在HTML5游戲潛在客戶里，我們已經(jīng)占有一半左右。”謝成鴻說道。據(jù)悉，國內(nèi)20家主流頁游廠商中，已經(jīng)有三分之一與Layabox合作。

“大型HTML5游戲在普通瀏覽器上跑不動，這是最大的問題?！彼f。于是，Layabox就做出了一套針對HTML5生態(tài)鏈的整體解決方案。

目前，Layabox有三個主要業(yè)務(wù)方向，在開發(fā)者端，基于Flash的開發(fā)環(huán)境較為成熟，所以Layabox為開發(fā)者提供在Flash環(huán)境下開發(fā)大型HTML5游戲的解決方案，夸張一點的理解就是一鍵轉(zhuǎn)換；在瀏覽器適配問題上，Layabox開發(fā)了自家的加速器，可以讓微信這樣的流量平臺也可以跑得動大型頁游。

幾年前，趙霏和他的團隊也都認(rèn)為，PC上既然經(jīng)歷了從端游到頁游的趨勢，說明用戶有使用場景上的需求，那么在移動設(shè)備上，應(yīng)該也會有從App向HTML5轉(zhuǎn)移的傾向。在解決卡頓和發(fā)熱的前提下，畢竟HTML5游戲不用下載安裝，比起App更加方便，而且營銷成本將近比App要低10倍。

難道HTML5真的能顛覆App？經(jīng)過幾年的試水，趙霏開始不看好大型HTML5游戲在移動端的前景。因為他發(fā)現(xiàn)，用戶在手機上玩大型游戲時，還是會傾向于App。“用戶體驗的時間和場景都是不對的，舉個簡單的例子，當(dāng)你想再玩一次HTML5網(wǎng)頁游戲時，會發(fā)現(xiàn)很難找到入口，但App至少在桌面上有個圖標(biāo)?！彼麑Α禝T時報》記者說道。

模式流向變現(xiàn)還得傍上O2O

在海底撈，最壯觀的場景就是排隊等食，雖然已經(jīng)使出了免費美甲、免費擦鞋等招數(shù)，但仍舊沒有緩解食客因為排隊而流失的情況。

這倒是激發(fā)了趙霏的靈感，于是磊友科技就為海底撈設(shè)計了一個HTML5的游戲營銷方案。食客在排隊時，可以通過掃描二維碼玩一個小游戲，如果能榮登排行榜，就可以領(lǐng)取海底撈的代金券。

今年1月份，這個HTML5游戲上線，在北京10家海底撈分店進行試玩，結(jié)果顯示，20%～30%的食客愿意參與進來，達到了30萬人次的訪問。

從海底撈的成功案例開始，寶潔、可口可樂、旺旺等公司都踏進了趙霏的門檻，目前已有將近100家企業(yè)讓他們定制游戲。一般這些小游戲都會被植入商家的微信公眾號內(nèi)，玩游戲并分享至朋友圈來贏取代金券，又是用積分抽獎等方式幫電信運營商消耗積分。

那么，怎么解決用戶留存的問題呢？“HTML5的游戲營銷最重要的是考慮使用場景，比起橫幅、彈窗等互動性不強的移動營銷模式，效果更好?！壁w霏說。

一般來說，在外面消費時，HTML5就顯示出了不用下載安裝的優(yōu)勢。到酒店先連Wi-Fi是一個常見的使用場景，客人可以直接掃二維碼自動關(guān)注酒店微信號，同時取得連接Wi-Fi的權(quán)限，然后就能點開公眾號里的菜單，玩游戲贏取附近餐廳的代金券。

趙霏認(rèn)為，HTML5小游戲如何能使流量變現(xiàn)，開發(fā)團隊?wèi)?yīng)該換個思路，“之前我們做大型HTML5游戲時，考慮的是怎么從用戶那賺錢，通關(guān)、買裝備等?，F(xiàn)在從2C到2B，考慮的是怎么讓企業(yè)買單。社交性比較強，能使線上線下聯(lián)動的游戲更有市場?！?/p>

結(jié)合了HTML5和O2O兩個熱點之后，對趙霏來說，上門找融資已經(jīng)不是一件難事了。他透露，今年六七月份，磊友科技就有B輪融資的計劃。

缺口工具和人才

趙霏曾談道：“研發(fā)完全自主內(nèi)核的瀏覽器引擎的難度不亞于一個操作系統(tǒng)?！弊詈?，由于很難追趕蘋果Safari瀏覽器迭代速度等壁壘，他和團隊就放棄了HTML5瀏覽器引擎的商用，現(xiàn)在只用于團隊內(nèi)部開發(fā)。

謝成鴻略帶自信地談道，“HTML5開發(fā)最大的問題就是工具的缺乏，因為它沒有像Flash一樣，有可控的開發(fā)語言，有成熟的開發(fā)環(huán)境。我們做Flash轉(zhuǎn)HTML5的解決方案就是想解決這些問題?！?/p>

HTML5缺乏成熟開發(fā)環(huán)境的表現(xiàn)之一，就是開發(fā)人才的缺失。上個月，招聘網(wǎng)站拉勾網(wǎng)發(fā)布報告顯示，HTML5開發(fā)成為了“職位多，人才少”的熱門崗位。就目前招聘的開發(fā)者市場水平來看，擁有1年左右工作經(jīng)驗的HTML5程序員，月薪基本在2～3萬，然而，擁有4到5年工作經(jīng)驗的AS程序員（基于Flash開發(fā)），月薪卻只有1.5萬。

“前盛大游戲CEO凌海的團隊，從去年到現(xiàn)在，竟然招不到一個專精于HTML5的程序員。這些天，他團隊的程序員就在我們這兒學(xué)習(xí)HTML5開發(fā)技術(shù)?！敝x成鴻說道。