這是該系列文章的第3篇，這次我們選擇了三個稍微高階一點的案例，使用了相對復(fù)雜的 Canvas 來實現(xiàn)。我們的目標(biāo)并非是推廣技術(shù)，而是展示技術(shù)所能實現(xiàn)的效果。

技術(shù)不是互動營銷的全部，但技術(shù)可以讓互動營銷更加精彩。

1. 網(wǎng)易嚴(yán)選×雷山刺繡

該項目是網(wǎng)易嚴(yán)選聯(lián)合中國美術(shù)學(xué)院，為貴州省雷山縣的苗文化專門打造的推廣頁面，其目標(biāo)是推廣黔東南地區(qū)的苗文化和地方特產(chǎn)。

整個頁面以苗文化中的刺繡為核心，并使用了繪畫+識別的交互方式，實現(xiàn)這一互動方式就用到了 HTML5 中相對高階的 Canvas 繪畫功能。

所謂 Canvas，顧名思義就是畫布功能，所要實現(xiàn)的是一些需要實時繪制圖片的交互方式，例如上圖中的控制針來做刺繡。

通常在使用 Canvas 時，都會定義一個畫布區(qū)域（長寬），然后通過程序來實現(xiàn)各種類型的動作，例如：

• 在畫布區(qū)域中的哪些像素點繪制什么顏色
• 在畫布區(qū)域中繪制某個圖形
• 讓某個圖形在畫布區(qū)域中做什么動作
• 等等……

但是要注意，HTML5 本身是不能繪圖的，繪圖的過程需要在 JavaScript 中完成。

舉個簡單的例子，我們要在屏幕上畫直線，JavaScript 代碼如下：

<canvas id="myCanvas" width="200" height="100"></canvas> <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke(); </script>

其中 myCanvas 就是畫布，寬200像素，高100像素。下面的 moveTo 和 lineTo 都是控制光標(biāo)在指定的像素位置（x,y）畫圖。最終的圖像如下：

在網(wǎng)易嚴(yán)選的案例中，所繪制的并不是直線，而是根據(jù)用戶的左右操控，實時計算當(dāng)前像素點和下一個要變成紅色的像素點的相對位置關(guān)系。

除了繪制圖案，Canvas 還有很多高級的功能，如果在加上第三方的特效庫，能實現(xiàn)的功能就更多了，請看下一個案例。

2. DDB 聞香識情

這是創(chuàng)意廠牌DDB的中秋活動頁面，用于推廣其月餅和香薰產(chǎn)品。

整個頁面都是采用 Canvas 制作的，并且使用了知名的 3D庫 three.js。與之前的 Canvas 繪制圖像不同的是，該案例是在 Canvas 中導(dǎo)入已有圖像，并使用程序控制它們的動態(tài)和交互。

從網(wǎng)頁資源中我們可以看到大量的圖片素材。

這些素材在程序的控制下分別做各種矢量運動（位移、放大縮小、旋轉(zhuǎn)等）和3D運動（各種角度的翻轉(zhuǎn)），就構(gòu)成了我們所看到的這個包含了豐富動畫和交互功能的頁面。

由此我們可以了解，程序能夠?qū)崿F(xiàn)的運動方式相對固定，但通過對這些運動方式的各種組合，就能得到一系列令人驚艷的效果。

3. 人民日報 子曰詩云

這是一個相對早一些的項目，但是卻很好地展示了 Canvas 的其他一些用途，例如游戲。

該項目是人民日報和騰訊游戲聯(lián)合推出的古詩類解謎游戲，通過組合單字和詩句來獲得積分，組合的交互過程非常有趣。

通過拖動偏旁部首，可以組合成文字；通過路徑連接不同的文字，即可組成詩句。這些拖動只能在水平和垂直的方向上拖動，斜著拖是沒有用的。

另外，對于偏旁部首的判斷也很有趣，所有偏旁部首只要能組成文字的即可組合，但不一定是詩句里的字，真是把漢字玩出了花。

值得注意的是，這款 HTML5 網(wǎng)頁游戲使用了 Cocos2D 游戲引擎來開發(fā)，這是一款優(yōu)秀的游戲開發(fā)引擎，曾被用于諸多主流手游和頁游的開發(fā)中。

對于 H5 來說，有太多的第三方框架、引擎、庫來支持開發(fā)，以實現(xiàn)各種炫目的效果。但真正核心的是我們的交互邏輯和最終要實現(xiàn)的傳播目的，技術(shù)只是實現(xiàn)這些目的的手段。

眾創(chuàng)科技?www.masscrunch.com

眾創(chuàng)科技是一家專注于創(chuàng)意實現(xiàn)的互動營銷技術(shù)供應(yīng)商，我們?yōu)槟峁┳钊娴幕蛹夹g(shù)服務(wù)，更為您提供面向業(yè)務(wù)的技術(shù)方案選擇和排雷服務(wù)。

總結(jié)

以上是生活随笔為你收集整理的html5 项目案例_互动案例技术分析（3）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。