利用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.