wordcloud----canvas 绘制标签云/词云web版wordle（二）

wordcloud----canvas 绘制标签云/词云web版wordle（二）

ps:偷懒了两天，现在把（二）补上

      在介绍旋转混排效果前，我先对（一）中的介绍进行一些补充:

补充一. gitHub上的插件使用方法：

       插件采用的是AMD  requier.js 在html页面中设置一个具有宽和高的div假设:id="wdiv"。并且引入requirejs ，main.js（如下图所示）文件是入口。

其中jquery为非必须插件，本人引入的目的是为了后期做一些小工具使用。其中在option中配置styleType 的参数用三种：normal--全部水平排列、vertical--垂直水平混排、tilt--45°倾斜混排。基础版只做到绘制完成即setOption，后期将继续设计更多有趣的接口比如根据输入的背景图片生成文字边界等，尽情期待吧！

data 中的frq将决定了文字的大小（ps:假设您的某个词特别大，别担心，那些个子小的文字会填充到大文字的空白中去的）

好吧，接着我们继续将如何实现旋转后的getImageData().。这个问题是考验你高中数学是否过关的问题。

canvas中的旋转是围绕左上角的（0,0）进行旋转的，所以，文字在随机分布的时候是在原点为中心，通过Math.random（）>0.5判断是横排还是竖排以达到随机的效果。

但是getImageData并不会因为文字的旋转平移而改变坐标，这时候就需要通过计算得到文字被平移后的位置。如果文字被旋转，文字区域的高度是原来的宽，而宽则是原来的高度。这里告诉你（x,y）被旋转90度后的坐标是（-y,x）然后再加上平移的像素即1/2的画布宽和1/2高。

旋转45°后呢！（x,y）会变如何呢，这个就留给大家自己计算了。或者直接看我的源码。