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

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

1. 網易嚴選×雷山刺繡

該項目是網易嚴選聯合中國美術學院，為貴州省雷山縣的苗文化專門打造的推廣頁面，其目標是推廣黔東南地區的苗文化和地方特產。

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

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

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

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

但是要注意，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 都是控制光標在指定的像素位置（x,y）畫圖。最終的圖像如下：

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

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

2. DDB 聞香識情

這是創意廠牌DDB的中秋活動頁面，用于推廣其月餅和香薰產品。

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

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

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

由此我們可以了解，程序能夠實現的運動方式相對固定，但通過對這些運動方式的各種組合，就能得到一系列令人驚艷的效果。

3. 人民日報 子曰詩云

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

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

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

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

值得注意的是，這款 HTML5 網頁游戲使用了 Cocos2D 游戲引擎來開發，這是一款優秀的游戲開發引擎，曾被用于諸多主流手游和頁游的開發中。

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

眾創科技?www.masscrunch.com

眾創科技是一家專注于創意實現的互動營銷技術供應商，我們為您提供最全面的互動技術服務，更為您提供面向業務的技術方案選擇和排雷服務。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。