canvas动画3：交互

canvas动画3

时隔很久，本人终于又写博客了（重度拖延症），把之前留下的canvas交互动画讲一讲。

电脑上的交互，指的是鼠标和键盘，我们今天主要用的是鼠标。

既然是鼠标的话，就要获取鼠标的各种事件，这次以mousemove做示例。

我们先定义一个鼠标对象，然后添加mousemove事件：

.(event) ....log(mouse); });

我们声明一个初始化函数init()，用于把制造圆的过程封装：

function init() { circleArray = [] i i.y .dx dy radius .();

这样的话，按照上一篇文章的做法，我们的canvas会出现一些问题。所以，需要给Circle对象update()里的属性都加上this：

......() ......)..() (...) .(...) ......

接下来我们就要用mousemove于动画进行交互了，我们假定圆心在鼠标坐标周围50px以内的时候圆会增大，这段代码应该写在update()里：

.......) .

我们设置了10个圆，把鼠标移上去的时候会看到在控制范围内的圆会不断变大，不会停下来，所以我在前面就设置了一个圆半径的最大值，以免它一直增大，然后把注释的内容去掉，圆就不会无限增大了：

但是有一个问题，圆放大了以后不会缩小，那么我们就让它在离开圆50px半径范围后缩小：

.......) maxRadius) .

这时候又有新问题产生了，画面一片空白，因为圆心不在鼠标固定范围内的圆全都变小了，甚至半径为负！显然简单的else是不成立的，还是得加个条件：

.......) maxRadius) (.

这里出现了一个新值：minRadius，我加在了Circle对象里this.minRadius = radius;，以原本的初始值作为它的最小值。好了，现在基本效果已经成型了：

接下来就是颜色的问题了，只要懂得canvas的基本api，修改颜色完全就是小儿科。我们设置一个数组，用于存放颜色值。

var colorArray = [ ]

然后在Circle对象里加上一个bg属性：this.bg = colorArray[Math.floor(Math.random()*colorArray.length)];，再往Circle的绘制函数添上一句ctx.fillStyle = this.bg;，然后ctx.fill();，多彩运动的圆圈canvas就做完了。

这是一个运用mousemove事件做的canvas交互动画，有兴趣的可以尝试其他事件（制作游戏用的键盘事件以及其他鼠标事件），或者思考如何给球加重力，如何检测碰撞事件，canvas的世界并不只有这么一点，相关资料的话，给大家推荐本书《canvas开发详解》。

本文的最终js代码如下：

@qq.com) @typecanvas ....ctx @typemouse .(event) ...).() ...(); }) colorArray = [ ] (xxydxdyradiusradiuscolorArray[.() ........)..() (...) .(...) .....(.......) maxRadius) (..circleArray () { circleArray = [] i i.y .dx dy radius .()() ...(i i++) { circleArray[i].();

posted @