描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。
设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生成源图形变换到目标图形中的N-1个渐变图形，采用简单的线性插值可以编写如下的二重循环：
for (k=1;k<N;k++)
for (i=0;i<M;i++)
{
x=(dx[i]-sx[i])/N*k+sx[i];
y=(dy[i]-sy[i])/N*k+sy[i];
// 按求得的插值坐标点绘制渐变图形
}
1．六瓣花朵渐变为圆
六瓣花朵的笛卡尔坐标方程式设定为：
t=r1*(1+sin(18*θ)/5) *(0.5+Math.sin(6*θ)/2);
x=t*cos(θ);
y=t* sin(θ); （0≤θ≤2π）
圆的笛卡尔坐标方程式为：
x=r*cos(θ)
y=r*sin(θ) （0≤θ≤2π）
在六瓣花朵和圆上分别取128个点，然后利用简单的线性插值绘制中间24个渐变图形。编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>六瓣花朵渐变为圆</title>
<script type="text/javascript">
function draw(id)
{
var canvas = document.getElementById(
id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 200, 200);
context.strokeStyle = "red";
context.lineWidth = 1;
var dig = Math.PI / 64;
var x1 = new Array(129);
var y1 = new Array(129);
var x2 = new Array(129);
var y2 = new Array(129);
for (var i = 0; i <= 128; i++)
{
d = 50 * (1 + Math.sin(18 * i * dig) /
5);
t = d * (0.5 + Math.sin(6 * i * dig) /
2);
x1[i] = t * Math.cos(i * dig);
y1[i] = t * Math.sin(i * dig);
x2[i] = 80 * Math.cos(i * dig);
y2[i] = 80 * Math.sin(i * dig);
}
context.beginPath();
for (n = 0; n <= 25; n++)
for (i = 0; i <= 128; i++)
{
x = (x2[i] - x1[i]) / 25 * n + x1[i] +
100;
y = (y2[i] - y1[i]) / 25 * n + y1[i] +
100;
if (i == 0)
{
context.moveTo(x, y);
bx = x;
by = y;
} else
context.lineTo(x, y);
}
context.lineTo(bx, by);
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出从六瓣花朵渐变为圆的图案，如图1所示。
图1 六瓣花朵渐变为圆
2．圆渐变为花朵
我们将图1图形中的圆渐变为六瓣花朵的过程动态展示出来。编写的HTML文件内容如下。
<!DOCTYPE>
<html>
<head>
<title>圆渐变为花朵</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"
style="border:3px double #996633;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById(
'myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 200, 200);
context.fillStyle = "red";
var dig = Math.PI / 64;
var x1 = new Array(129);
var y1 = new Array(129);
var x2 = new Array(129);
var y2 = new Array(129);
var n = 0;
for (var i = 0; i <= 128; i++)
{
d = 50 * (1 + Math.sin(18 * i * dig) /
5);
t = d * (0.5 + Math.sin(6 * i * dig) /
2);
x1[i] = t * Math.cos(i * dig);
y1[i] = t * Math.sin(i * dig);
x2[i] = 80 * Math.cos(i * dig);
y2[i] = 80 * Math.sin(i * dig);
}
function draw()
{
context.clearRect(0, 0, 200, 200);
context.beginPath();
for (i = 0; i <= 128; i++)
{
x = (x1[i] - x2[i]) / 25 * n + x2[i] +
100;
y = (y1[i] - y2[i]) / 25 * n + y2[i] +
100;
if (i == 0)
{
context.moveTo(x, y);
bx = x;
by = y;
} else
context.lineTo(x, y);
}
context.lineTo(bx, by);
context.stroke();
n = n + 1;
if (n > 25) n = 0;
context.fill();
}
window.setInterval('draw()', 300);
</script>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在画布中看到从圆渐变为六瓣花朵的动画过程，如图2所示。
图2 从圆渐变为六瓣花朵
3．六瓣花朵渐变为正方形
仿照上面的思路，设计程序将六瓣花朵渐变为正方形，且渐变计算时采用对数函数。编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>六瓣花朵渐变为正方形</title>
<script type="text/javascript">
function draw(id)
{
var canvas = document.getElementById(
id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEDD";
context.fillRect(0, 0, 300, 300);
context.strokeStyle = "red";
context.lineWidth = 1;
var dig = Math.PI / 60;
var x1 = new Array(120);
var y1 = new Array(120);
var x2 = new Array(120);
var y2 = new Array(120);
// 生成花瓣基本数据，坐标保存在（x1[i]，y1[i]）中
var petalNum = 6; // 花瓣数
for (var i = 0; i < 120; i++)
{
d = 50 * (1 + Math.sin(petalNum * (
i * dig + Math.PI / 4)));
x1[i] = d * Math.cos(i * dig + Math
.PI / 4);
y1[i] = -d * Math.sin(i * dig +
Math.PI / 4);
}
// 生成多边形基本数据，坐标保存在（x2[i]，y2[i]）中
var r = 150;
var sideNum = 4; // 正多边形边数
var k = 120 / sideNum;
dig = Math.PI / sideNum;
var dd = 2 * r * Math.sin(dig) / k;
for (i = 0; i < sideNum; i++)
{
aa = 2 * i * dig + 3 * Math.PI / 4;
x0 = r * Math.sin(aa);
y0 = r * Math.cos(aa);
for (j = 0; j < k; j++)
{
x2[i * k + j] = x0 + j * dd * Math
.sin(aa + Math.PI / 2 + Math.PI /
sideNum);
y2[i * k + j] = y0 + j * dd * Math
.cos(aa + Math.PI / 2 + Math.PI /
sideNum);
}
}
context.beginPath();
// 按对数规律进行图案渐变
for (n = 0; n <= 25; n++)
{
for (i = 0; i < 120; i++)
{
x = (x2[i] - x1[i]) / Math.log(25) *
Math.log(n) + x1[i] + 150;
y = (y2[i] - y1[i]) / Math.log(25) *
Math.log(n) + y1[i] + 150;
if (i == 0)
{
context.moveTo(x, y);
bx = x;
by = y;
} else
context.lineTo(x, y);
}
context.lineTo(bx, by);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="320" height="320"></canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出从六瓣花朵渐变为正方形的图案，如图3所示。
图3 从六瓣花朵渐变为正方形
将绘制图3的HTML程序中的花瓣数设置为5，正多边形边数也设置为5，即修改语句“var petalNum=6;”为“var petalNum=5;”，修改语句“var sideNum=4;”为“var sideNum=5;”，则在画布中绘制出如图4所示的从五瓣花朵渐变为正五边形的图案。
图4 从五瓣花朵渐变为正五边形
4．正五边形渐变为五瓣花朵
我们将图4图形中的正五边形渐变为五瓣花朵的过程动态展示出来。编写的HTML文件内容如下。
<!DOCTYPE>
<html>
<head>
<title>正五边形渐变为五瓣花朵</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"
style="border:3px double #996633;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById(
'myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 300, 300);
context.fillStyle = "red";
var dig = Math.PI / 60;
var x1 = new Array(120);
var y1 = new Array(120);
var x2 = new Array(120);
var y2 = new Array(120);
// 生成花瓣基本数据，坐标保存在（x1[i]，y1[i]）中
var petalNum = 5;
for (var i = 0; i < 120; i++)
{
d = 50 * (1 + Math.sin(petalNum * (i *
dig + Math.PI / 4)));
x1[i] = d * Math.cos(i * dig + Math.PI /
4);
y1[i] = -d * Math.sin(i * dig + Math
.PI / 4);
}
// 生成多边形基本数据，坐标保存在（x2[i]，y2[i]）中
var r = 150;
var sideNum = 5;
var k = 120 / sideNum;
dig = Math.PI / sideNum;
var dd = 2 * r * Math.sin(dig) / k;
for (i = 0; i < sideNum; i++)
{
aa = 2 * i * dig + 3 * Math.PI / 4;
x0 = r * Math.sin(aa);
y0 = r * Math.cos(aa);
for (j = 0; j < k; j++)
{
x2[i * k + j] = x0 + j * dd * Math.sin(
aa + Math.PI / 2 + Math.PI /
sideNum);
y2[i * k + j] = y0 + j * dd * Math.cos(
aa + Math.PI / 2 + Math.PI /
sideNum);
}
}
var n = 0;
function draw()
{
context.clearRect(0, 0, 300, 300);
context.beginPath();
for (i = 0; i < 120; i++)
{
x = (x1[i] - x2[i]) / Math.log(25) *
Math.log(n) + x2[i] + 150;
y = (y1[i] - y2[i]) / Math.log(25) *
Math.log(n) + y2[i] + 150;
if (i == 0)
{
context.moveTo(x, y);
bx = x;
by = y;
} else
context.lineTo(x, y);
}
context.lineTo(bx, by);
context.closePath();
context.stroke();
n = n + 1;
if (n > 25) n = 0;
context.fill();
}
window.setInterval('draw()', 400);
</script>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在画布中看到从正五边形渐变为五瓣花朵的动画过程，如图5所示。
图5 正五边形渐变为五瓣花朵
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR（引进版）【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大，至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大，至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】
- 谭咏麟.2022-倾·听【环球】【WAV+CUE】
- 4complete《丛生》[320K/MP3][85.26MB]
- 4complete《丛生》[FLAC/分轨][218.01MB]