目前项目中有个需求:CAD矿图中的测点达到一定的预警值时,需要用闪烁的动态效果提示用户该测点已经预警。完成的效果图如下:


矿图中闪烁效果
1.首先我们需要绘制一个半径为1逐渐递增的圆,半径达到一定值后,重新开始。

此时我们会得到如下的效果,但是这个效果貌似也太单调了,就一个简单的圈圈在闪烁,接下来我们让它丰富一下。

2.采用canvas径向渐变
由圆心开始向外扩散渐变效果,指定圆心,开始半径和结束半径通过createRadialGradient方法得到一个Gradient对象,通过addColorStop方法设置各个位置的颜色。详细介绍请查阅其他资料。代码修改为:

 

此时我们会得到如下的效果,看起来比之前好看多了(渐变的颜色配色可以按照自己的喜好进行设计)。

但是我们会发现另一个问题:在change方法的开始就对画布进行了清除,例如效果图中底图同样是用Canvas绘制的CAD矿图,如果对画布全部清除就不得不重新绘制,这可不是一个好的主意。

3.另创建一个Canvas
要解决上面的问题,我们需要另创建一个Canvas,在新的Canvas上绘制预警特效,这样清除的话就不会影响到其他的图形。代码如下:

原文地址: http://www.wuyandong.me/?p=149