利用Java制作网页水面特效

汪志达

摘 要： 介绍了用Java在网页上制作水面特效的总体实现方案、主要技术方法和程序设计，以及应用方面几个问题的解决。其技术核心是将图像映在波动的水中。将水波视作正弦波，计算帧相位角和振幅，以振幅为动画帧偏移量，横向逐线绘制；同时采用双缓冲技术，先在图像缓冲区中处理图像，完成后再显示到窗体上。

关键词： Java； 程序设计； 网页； 水面特效； 图像

中图分类号：TP301.6；311.11 文献标志码：A 文章编号：1006-8228（2014）10-54-02

Water special effects on Webpage using Java

Wang Zhida

（Ningbo Polytechnic， Ningbo， Zhejiang 315800， China）

Abstract： The implementing project of making water special effects on webpage using Java is introduced. The related technique method and programming are discussed in detail， with some applied issues. The core technology is casting image on waving water. The waves are regarded as sine curves. The frame's phase angle and amplitude are calculated. The amplitude is used as frame vertical deviant to draw each line of the frame. Meanwhile， double buffer technology is utilized to process the image on buffer area and display it on the window.

Key words： Java； programing； webpage； water special effects； image

0 引言

使用Applet程序可以方便地进行图像处理，再融合动画技术，可在网页上制作出各种特殊效果。本文介绍水面特效的制作，将图像映在波动的水中，如图1所示，运行时水面是运动的。

图1 水面特效

1 实现方案

1.1 总体设计

采用双缓冲技术，先在图像缓冲区中处理图像，完成后再显示到窗体上。为此需要设置图像缓冲区，并将缓冲区逻辑划分为左、右两部分。总体制作过程为：缓冲区左半部显示图像，右半部绘制倒影，左半部制作动画帧（覆盖图像），窗体显示图像和动画帧。如图2所示。

图2 总体制作过程

1.2 绘制倒影

倒影的绘制采用逐线移动的处理方法，如图3所示。

图3 绘制倒影

图3中h是缓冲区高度，i是线号，在程序中可以作为循环变量。按照上图的设计，向下移动是正向，开始的移动量是正的，但随着i的不断增加，移动量将逐渐变为负值，表示向上移动。

1.3 绘制动画帧

本例设计12个动画帧，帧号0～11，存于num，帧数越多图像越精细，但动画循环中的延时时间需要相应缩短。水波为正弦波，不同的帧相位角angle不同，用如下公式计算：

angle=num?2?л/12

仍然采用逐线移动的方法绘制动画帧，动画帧中的图像线可以理解为是倒影中相应图像线偏离原先位置形成的。假设向上偏移，偏移量用变量wave存储，当wave为负时则表示向下偏移，如图4所示。

图4 绘制动画帧

2 程序设计

程序整体框架如下：

import java.awt.*；

import java.applet.*；

public class MyJavaApplet extends Applet

{ Image img； //图像

Image imgBuff； //图像缓冲区

Graphics ibg； //缓冲区画笔

int w，h； //图像宽高

int num=0； //帧号

double angle； //相位角

int wave； //偏移量

public void init（）

{ //加载图像、追踪、获取图像宽高

//创建缓冲区及其画笔

//在缓冲区的左半部显示图像

//在缓冲区的右半部绘制倒影

}

public void paint（Graphics g）

{ //计算当前帧的相位角

//在缓冲区的左半部绘制动画帧

//产生下一帧的帧号

//在Applet窗体上部显示图像

//在Applet窗体下部显示动画帧

//休眠50毫秒

repaint（）；

}

public void update（Graphics g）

{ paint（g）；

}

}

由于设计在paint方法中完成循环，在paint方法的最后，使用repaint方法再调用paint。程序使用了update方法，且在其中使用参数g调用paint方法，其作用是取消每次循环的清屏操作，避免动画出现闪烁[5]。

在init方法的最后，按照设计方案，使用循环，用逐线移动的方法，在缓冲区的右半部绘制倒影，代码[2]为：

for（int i=0；i

{ ibg.copyArea（0，i，w，1，w，（h-1）-2*i）；

}

循环变量i即线号；copyArea方法前4个参数指定了一个区域的左上角坐标（0，i），和宽（w）高（1），即一根图像线，后2个参数说明向右移动w和向下移动（h-1）-2*i，即移动到缓冲区右半部形成倒影的位置，向下的移动量在设计方案中已经分析过；循环执行结束后，倒影也绘制完成。

在paint方法中，绘制动画帧也是在循环中采用逐线移动的方法，代码如下[3]：

for（int i=0；i

{ wave=（int）（（i/12.0+1）*Math.sin（h/12.0*（h-i）/（i+1）+angle））；

ibg.copyArea（w，i+wave，w，1，-w，-wave）；

}

循环变量i即线号，循环中先计算倒影图像中相应的图像线偏离原先位置的偏移量wave，然后使用copyArea方法移动，偏移量wave在设计方案中已经分析过。copyArea方法的前4个参数指定了一个区域的左上角坐标（w，i+wave），和宽（w）高（1），即显示在缓冲区右半部的倒影图像上水平方向的一根图像线；后2个参数说明向左移动w和向上移动wave，即移动到缓冲区左半部形成动画帧的位置。循环执行结束后，一个动画帧也就绘制完成[4]。

3 应用要点

实际应用中，展示水面特效的Applet窗体尺寸是由网页设计规划确定的，可通过标记传送，程序用getParameter方法接收[1]。标记应在和标记之间，无论什么类型的数据，都是以字符串的形式传送的，格式为：

getParameter方法原型为：

String getParameter（"参数名"）

返回值是字符串类型的，需要时可在程序中将其转换为原始类型。

参考文献：

[1] 陈杰华.JavaScript Web开发技术（第2版）[M].清华大学出版社，

2013.

[2] 于波.Java程序设计与工程实践[M].清华大学出版社，2013.

[3] 孙燮华.Java程序设计与应用开发[M].机械工业出版社，2013.

[4] 吴其庆.Java编程思想与实践[M].冶金工业出版社，2002.

[5] 王克宏.Java技术及其应用[M].高等教育出版社，2001.