这是该系列文章的第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众创科技是一家专注于创意实现的互动营销技术供应商,我们为您提供最全面的互动技术服务,更为您提供面向业务的技术方案选择和排雷服务。