html5 项目案例_互动案例技术分析（3）

这是该系列文章的第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

众创科技是一家专注于创意实现的互动营销技术供应商，我们为您提供最全面的互动技术服务，更为您提供面向业务的技术方案选择和排雷服务。